Preview

Learn how to set up Prismic Previews in your repository.

Prismic Previews allow you to view draft documents live on your website without publishing them publicly. You can set up many preview environments to preview your content in different contexts, such as production and development.

When a user launches a preview in the Writing Room, a temporary and secure ref (a token that references a specific content version) is generated for the preview session. Prismic sets a cookie with a token to access the preview. That cookie is included in the user's request when they request a draft document in the web app, allowing them to view the page.

In your repository, go to Settings > Previews > Manage your Previews and select Create a preview. Then fill in the new preview configuration:

• Site Name: The display name to identify the website in the preview.
• Domain for Your Application: The URL of your site, such as https://example.com/ or http://localhost:3000/
• Preview route: A route in your app that provides a link resolver. Some of Prismic's app development kits create this route for you at /preview.

Once you have configured Previews in your repository, you need to implement the preview functionality in your project code.

The syntax and configuration process of the Preview functionality varies for each technology. We recommend reading the Preview documentation for your chosen technology to learn how to set it up in your project:

The Prismic Toolbar works together with Previews, giving you a list of the documents in the preview and a link to open them in the Writing Room.

The toolbar works by adding a Prismic script in your code that automatically detects when a user is browsing the website in a preview session. You can find the script in your repository Settings > Previews > Include the Prismic Toolbar.

The script looks like this, with your repository name instead of your-repo-name:

Prismic's development kits and plugins for some frameworks (such as Nuxt.js, Next.js, and Gatsby) add this script automatically, so you don't need to worry about it. To learn more, see the documentation for your chosen technology.

The Prismic Toolbar provides shareable links, which allow you to share live previews of drafts with anyone. These links are useful when sharing a page preview with teammates or giving early access for stakeholder validation.

To get your shareable link, open a preview session and select Get a shareable link, then click on Copy the link, and you're all set. You can now share this URL.