--- title: "Previews" description: "View and share draft content on your website before publishing." category: "concepts" audience: developers lastUpdated: "2025-11-06T01:07:50.000Z" --- 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](https://prismic.io/docs/slices.md) thumbnails in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). * **Full-website previews**: Navigate your entire website with draft content. > Visit [prismic.io/try](https://prismic.io/try) to see both kinds of previews in action. # Live previews Live previews show content updates in real-time while editing in the [Page Builder](https://prismic.io/docs/guides/page-builder.md). Each [slice](https://prismic.io/docs/slices.md) 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](https://prismic.io/docs/nextjs.md#live-previews-in-the-page-builder), [Nuxt](https://prismic.io/docs/nuxt.md#live-previews-in-the-page-builder), and [SvelteKit](https://prismic.io/docs/sveltekit.md#live-previews-in-the-page-builder) 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](https://prismic.io/docs/nextjs.md), [Nuxt](https://prismic.io/docs/nuxt.md), or [SvelteKit](https://prismic.io/docs/sveltekit.md). * 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](https://prismic.io/docs/nextjs.md#preview-draft-content), [Nuxt](https://prismic.io/docs/nuxt.md#preview-draft-content), and [SvelteKit](https://prismic.io/docs/sveltekit.md#preview-draft-content) guide. # Prismic toolbar The Prismic toolbar automatically appears during preview sessions, providing content writers with: * A list of pages in the current preview * Quick links to open pages in the Page builder * Access to shareable preview links * A button to exit the preview session The toolbar appears in the bottom-left corner of a preview. ## How to add the Prismic toolbar Prismic's framework integrations automatically include the toolbar: * **Next.js**: Added through the `` component * **Nuxt**: Included automatically by the `@nuxtjs/prismic` module * **SvelteKit**: Added through the `` component Learn how to add the Prismic toolbar in the [Next.js](https://prismic.io/docs/nextjs.md#preview-draft-content), [Nuxt](https://prismic.io/docs/nuxt.md#preview-draft-content), or [SvelteKit](https://prismic.io/docs/sveltekit.md#preview-draft-content) 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. To create a shareable link: 1. Open a preview session. 2. Click **Get a shareable link** in the toolbar. 3. Copy and share the generated URL. Shareable links are temporary and expire. # Advanced: How previews work > You do not need to know how previews work to use them. This section is for those who want to know their technical details. 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: 1. Content writer edits content in the Page Builder 2. Content is converted to Prismic's Content API format in real-time 3. Data is sent through an iframe bridge using `window.postMessage()` 4. Each slice preview iframe loads your website's `/slice-simulator` route 5. The route receives content data and stores it as a compressed URL parameter 6. Your slice components render the preview using your actual styling and functionality 7. 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: 1. Content writer clicks "Preview the page" in the Page Builder 2. Prismic generates a temporary, secure ref (token) for the preview session 3. Prismic sets a `preview.prismic.io` cookie containing this token 4. Your website receives requests with the preview cookie 5. Your preview route detects the cookie and fetches draft content using the ref 6. The Prismic Toolbar appears to help manage the preview session 7. 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.