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.

How Previews work

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.

Configure previews in your repository

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.

Screenshot of a repository's preview configuration

Configure previews in your app

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.

Screenshot of the toolbar and edit button

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:

<script
  async
  defer
  src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"
></script>

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

Shareable links

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.

Screenshot of the Get shareable link option of the toolbar.

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.