--- title: "Previews" description: "View and share draft content on your website before publishing." category: "concepts" audience: developers lastUpdated: "2026-09-09T14:09:06.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](#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](#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. # Set up previews How you set up previews in your website depends on its framework. See the step-by-step instructions 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), or [SvelteKit](https://prismic.io/docs/sveltekit.md#live-previews-in-the-page-builder) guide. Your Prismic repository stores two preview settings, the same for every framework: * A **preview URL** for [full-website previews](#full-website-previews), such as `https://example.com/api/preview`. A repository holds one per website address. Add one with `npx prismic preview add `. * The **slice simulator URL**, which the Page Builder loads [live previews](#live-previews) from. A repository holds one, and each change replaces it. Set it with `npx prismic preview set-simulator `. The two commonly point at the same website. After you deploy, add the preview URL of the deployed website and set the simulator URL to it. # 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. Your repository stores the URL of that route as its **slice simulator URL**, and the Page Builder loads each thumbnail from it. 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 URLs 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.