Skip to content

Preview

Your site can render unpublished content for people who are allowed to see it. Two cases:

  • A document's draft — what a page looks like with edits nobody has approved.
  • A whole release — what the site looks like once a set of changes goes live.

Both work the same way: a token on the request.

Accepting a preview token

Read the token from the URL and forward it to the API:

js
const params = new URLSearchParams(window.location.search)
const token = params.get('cms-preview-token')?.trim() || null

const query = token ? `?previewToken=${encodeURIComponent(token)}` : ''

const res = await fetch(`${API}/api/v1/${SITE}/${ENV}/${path}${query}`, {
  cache: token ? 'no-store' : 'default',
})

That is the whole integration. Never cache a preview response.

You can also send the token as a header:

X-CMS-Preview-Token: <token>

What comes back

HeaderMeaning
X-CMS-Preview: grantedYou are seeing a draft.
X-CMS-Preview: granted; releaseYou are seeing a release's content.
X-CMS-Preview: denied; …The request asked for a preview and had no valid credential. You got the published document.
403A token was presented and is invalid, expired, or for another site.

Surface denied in your UI. A preview build that silently shows published content looks like the CMS lost an edit.

?preview=1 grants nothing

It asks for a preview. Without a token or a console session, you get published content and a denied header.

Release previews

A release preview serves the release's content for every route it carries, and published content for everything else, so links out of the previewed page still work.

Editors open one from the console: Releases → Preview release. It mints a token and opens your site with it. Nothing extra is needed on your side beyond the snippet above.

Developing a new block

A release token is not tied to any particular site. The same token works against production, a preview build, or http://localhost:5173.

That is how you build a block type and its component at the same time:

  1. Model the block type in the console.
  2. Write the component locally.
  3. Author content using it and add it to a release.
  4. In the console, Preview release, and choose your local dev server.
  5. Your machine renders the release, including the block nothing has deployed yet.
  6. Deploy the code, then publish the release.

Opening the same token against production instead will show "Unknown block type" for that section — which is exactly what publishing before the deploy would do.

Token lifetime

Tokens last 12 hours by default, 24 at most, and can only be minted by someone with access to the project. There is nothing to configure on your side.

A Nubisco product. Not open source.