Preview Drafts

This page will teach you how to set up Prismic previews a Vanilla JavaScript development environment.

On this page, you will gain a theoretical understanding of how previews work under the hood with Prismic, and you’ll configure Prismic previews in a project using Vanilla JavaScript.

Set up your project

If you’ve completed the setup step, you know how a Vanilla JavaScript project works in both the browser and Node.js. In this guide, we’ll use the browser setup, since we’ll need something displayed in the browser to preview.

Ensure your client has a route resolver configured

Make sure to add a route resolver routes object to your client to define the URL structure of your project. This helps the preview to know which route to go.

Create a preview route

Create a file at the root of your project called preview.html and paste in this code:

<!doctype html>
<html>
  <head>
    <title>Preview route</title>
    <script type="module">
      import { client } from "../path-to-your-client.js";

      const init = async () => {
        const defaultURL = "/";

        const url = await client.resolvePreviewURL({
          defaultURL,
        });
        window.location.replace(url);
      };
      init();
    </script>
  </head>
  <body>
    <h1>Loading Preview...</h1>
  </body>
</html>

Inside, you will use the resolvePreviewURL() method, which will get the preview token and document ID from the preview URL and generate a URL for the document to be previewed. Then, the script redirects the browser to this URL with JavaScript’s replace() method.

This /preview route will function as a middleware to redirect to the correct path when you launch a preview session from the editor.

Find your script in your repository’s Settings > Previews and include the script to the head of every page of your website, including 404 pages:

<!DOCTYPE html>
<html>
  <head>
    <title>Preview route</title>
    <!-- Here is your Prismic Toolbar script -->
+   <script async defer src="https://static.cdn.prismic.io/prismic.js?new=true&repo=your-repo-name"></script>

    <script type="module">
      import { client } from '../client.js'

      const init = async () => {
        const defaultURL = '/'

        const url = await client.resolvePreviewURL({
          defaultURL,
        })
        window.location.replace(url)
      }
      init()
    </script>
  </head>
  <body>
    <h1>Loading Preview...</h1>
  </body>
</html>

Replace your-repo-name in the toolbar script so that it works with your repository

ℹ️ How does your website access the draft content?

Draft content is not publicly accessible on your API endpoint, so how does it appear in your preview? When you click the “preview” button in the Prismic editor, Prismic sets a cookie in your browser for the preview session. All of the query methods in @prismicio/client check for that cookie when they query content from Prismic.

If the cookie is present, the query methods will include it in the API query, and you will receive draft content for that preview session. (By default, a preview session previews the draft content in your repository. But if you preview a release, you will see the content from that release instead.) The Prismic Toolbar includes an “X” button to quit the preview session, finish the preview session, and delete the preview cookie. You can also do this manually in your browser dev tools.

Enable previews

Enable previews in your repository. Use /preview for the Preview Route in the preview settings. For more information on the preview settings, read Set up Previews.

Preview your draft documents

Now go to one document in your repository, make changes, save and click the preview button. You’ll should see the draft version of your document.

Please remember that with a setup like this, you can only preview documents with a corresponding HTML file.