Concepts

Previews

View and share draft content on your website before publishing.

Previews let content writers see draft content on your website before publishing it. This enables content review, stakeholder approval, and testing before making changes live.

Prismic supports two types of previews:

Live previews: Real-time slice thumbnails in the Page Builder.
Full-website previews: Navigate your entire website with draft content.

Live previews

Live previews show content updates in real-time while editing in the Page Builder. Each slice appears as a live-updating thumbnail, giving content writers immediate visual feedback.

How to set up live previews

Live previews require a special /slice-simulator route in your website that renders slices in isolation. This route is used by the Page Builder to show real-time previews of content changes.

Step-by-step setup instructions for your website’s framework are available in the Next.js, Nuxt, and SvelteKit guide.

Full-website previews

Full-website previews let content writers navigate your entire website with draft content, exactly as it will appear when published. These previews can be shared with teammates for review.

How to set up full-website previews

To use previews, you need:

A website built with a supported framework: Next.js, Nuxt, or SvelteKit.
Preview routes configured in your website code.
Preview settings configured in your Prismic repository.

Step-by-step setup instructions for your website’s framework are available in the Next.js, Nuxt, and SvelteKit guide.

The Prismic toolbar automatically appears during preview sessions, providing content writers with:

A list of documents in the current preview
Quick links to open documents in the Writing Room
Access to shareable preview links
A button to exit the preview session

The toolbar appears in the bottom-left corner of a preview.

A screenshot of the Prismic toolbar during a preview. — The Prismic toolbar during a preview.

Prismic’s framework integrations automatically include the toolbar:

Next.js: Added through the <PrismicPreview> component
Nuxt: Included automatically by the @nuxtjs/prismic module
SvelteKit: Added through the <PrismicPreview> component

Learn how to add the Prismic toolbar in the Next.js, Nuxt, or SvelteKit guide.

Content writers can generate shareable preview links to collaborate with teammates. These links allow anyone to view draft content without needing access to your Prismic repository.

A screenshot of generating a shareable link from the toolbar. — Generating a shareable link from the toolbar.

To create a shareable link:

Open a preview session.
Click Get a shareable link in the toolbar.
Copy and share the generated URL.

Shareable links are temporary and expire.

Advanced: How previews work

Understanding how previews work can help you troubleshoot issues and customize your implementation. Both preview types use different mechanisms to display draft content on your website.

How live previews work

Live previews use real-time communication to update slice thumbnails as content is edited:

Content writer edits content in the Page Builder
Content is converted to Prismic’s Content API format in real-time
Data is sent through an iframe bridge using window.postMessage()
Each slice preview iframe loads your website’s /slice-simulator route
The route receives content data and stores it as a compressed URL parameter
Your slice components render the preview using your actual styling and functionality
When content changes, the process repeats and previews update instantly

This system ensures that live previews look exactly like they will on your published website while updating as fast as your framework can render.

How full-website previews work

Full-website previews use a token-based system to display draft content across your entire website:

Content writer clicks “Preview the page” in the Page Builder
Prismic generates a temporary, secure ref (token) for the preview session
Prismic sets a preview.prismic.io cookie containing this token
Your website receives requests with the preview cookie
Your preview route detects the cookie and fetches draft content using the ref
The Prismic Toolbar appears to help manage the preview session
Content writer navigates your website seeing draft content everywhere

The preview session remains active until closed or expired, allowing only the content writer to see the draft content.

Was this page helpful?