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.

A screenshot of a page with live previews in the Page Builder.

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.

A screenshot of the Preview the page button in the Page Builder.

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.

A screenshot of the Prismic toolbar during 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.

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

How full-website previews work