Preview mode in production

You may want to add the ability for your editors to preview their designs in your production website.

Plasmic supports loading preview content directly in its APIs and libraries. See the corresponding API reference for your framework or for the REST API. For example, if using a framework library, you can do something like this:

plasmic-init.ts
Copy
export const PLASMIC = initPlasmicLoader({
projects: [
/* ... */
],
// Fetches the latest revisions, whether or not they were unpublished!
// Disable for production to ensure you render only published changes.
preview: true
});

However, this will make all usages of Plasmic load preview content! For most normal visitors, you want them to see published content only. How do you load both published and preview content on your production site?

Luckily, doing so is straightforward—simply create a separate preview loader:

plasmic-init.ts
Copy
export const PLASMIC = initPlasmicLoader({
projects: [
/* ... */
]
});
export const PREVIEW_PLASMIC = initPlasmicLoader({
projects: [
/* ... */
],
preview: true
});

Then, you can decide which one to use based on your app or framework’s preview logic.

some-page.tsx
Copy
function CatchAllPage({ shouldPreview, plasmicData }) {
// or any page component
return (
<PlasmicRootProvider
loader={shouldPreview ? PREVIEW_PLASMIC : PLASMIC}
prefetchedData={shouldPreview ? undefined : plasmicData}
>
<PlasmicComponent component="..." />
</PlasmicRootProvider>
);
}

Give feedback on this page