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:

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:

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.

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

For instance, see how Next.js previews work. In short, if you create an API endpoint that sets setPreviewData, then any subsequent call to other routes—even those for otherwise statically built pages!—will pass a context.preview of true, which you will want to simply forward to the page render function.

Have feedback on this page? Let us know on our forum.