Skip to main content

Strapi Preview

Strapi preview lets editors check content before it is published. It is most useful for reviewing draft pages, localized updates, SEO fields, media, and page-builder changes in the same context where visitors will eventually see them.

This starter wires Strapi's Preview button to the app preview route, so editors can move from an entry in the Strapi admin panel directly to the matching draft or published URL.

See the official Strapi Preview documentation for the upstream feature overview.

Live Preview

Strapi Growth and Enterprise plans support Live Preview, which updates the preview as editors change content. See Strapi Live Preview.

Preview Button​

The admin preview button is configured in apps/strapi/config/admin.ts.

It opens the UI preview route:

GET /api/preview?secret=$STRAPI_PREVIEW_SECRET&url=/<path>&status=draft|published&locale=<locale>

Required variables:

STRAPI_PREVIEW_ENABLED=true
CLIENT_URL=http://localhost:3000
STRAPI_PREVIEW_SECRET=

STRAPI_PREVIEW_SECRET must match in Strapi and UI.

Fetching Draft Content​

Page fetching reads draftMode().isEnabled. When draft mode is active, page requests send status: "draft" to Strapi.

This keeps the same public page renderer while changing which Strapi document status is fetched.

Troubleshooting​

  • Preview button missing in Strapi: check STRAPI_PREVIEW_ENABLED, CLIENT_URL, and the content type preview configuration.
  • Preview opens but shows published content: check matching STRAPI_PREVIEW_SECRET values and browser cookie behavior.
  • Preview opens the wrong locale: verify the document locale and URL generated by apps/strapi/config/admin.ts.
  • Frontend preview route behavior is documented in Preview API.