Some components will never be editable without the full context of your Astro site. For example, if you rely heavily on a package without browser support or access file and network resources directly.
In these cases, you'll need to provide fallback content for Bookshop to use or opt out of live previews for a set of components altogether.
Rendering different content when live editing#
Bookshop sets a global flag when rendering your components in the Visual Editor. Using this flag you can show extra information to your editors or render fallback content instead of unsupported templating.
{
ENV_BOOKSHOP_LIVE
? <>
<p>I am being edited live!</p>
<h1>Fallback Title</h1>
</>
: <>
<p>Standard build output</p>
<h1>{ serverOnlyFunction() }</h1>
</>
}
With the above component, your production-hosted site will contain Standard build output and the output
of the serverOnlyFunction function. Only when inside CloudCannon's Visual Editor, where serverOnlyFunction does not exist,
will your editors see the Fallback Title branch of the template.