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.
A page with live previews in the Page Builder.
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.
The Preview the page button in the Page Builder.
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.
Prismic toolbar
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.
The Prismic toolbar during a preview.
How to add the Prismic toolbar
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.
Share previews
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.
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 Document 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.