Previews & the Prismic Toolbar

When working in the writing room, you can preview new content on your website without having to publish the document, you can set up one or more websites where the content can be previewed. This allows you to have a production server, staging server, development server, etc.  Discover how to handle multiple environments in Prismic.

The Toolbar allows you to edit your pages. In your website, just click the button, select the part of the page that they want to edit, and you'll be redirected to the appropriate page in the Writing Room.

New Toolbar Activation for Older Repos

The current preview toolbar is enabled by default on all new Prismic repos. However, if you're on an older repo, you might be on older version of the toolbar. If your preview script src url includes new=true, then your preview functionality includes an edit button. If the src does not include new=true and you would like the new preview toolbar, please contact us via the Prismic forum so we can activate it for you.

1. Configure Previews

In your repository, navigate to Settings > Previews. Here you can add the configuration for a new preview, just add:

  • The Site Name: The name of the current site your configuring.
  • Domain URL: You can add the URL of your live website or a localhost domain, such as: http://localhost:8000.
  • Link Resolver (optional) : In order to be taken directly to the page you are previewing instead of the homepage, add a Link Resolver which is an endpoint on your server that takes a Prismic document and returns the url for that document. More details on step 3. Add a Link Resolver endpoint.

2. Include the Prismic Toolbar javascript file

You will need to include the Prismic toolbar script on every page of your website including your 404 page.

You can find the correct script in your repository Settings section, under the Previews tab.

Settings > Previews > Script

Note: You'll need to format this script if you're using PUG

<script async defer src="”></script>

Correct repo name

Note: This example script has your-repo-name at the end of the URL, this value needs to be replaced with your repository name. You can find the correct script for in your repository's Settings > Previews > Script.

Shareable Previews & unpublished previews

To guarantee that Shearable Preview links and unpublished document previews work properly you must ensure that these scripts are included on every page of your website, including your 404/Page Not Found page. Otherwise these previews might not work.

3. Add a Link Resolver endpoint

In order to be taken directly to the page you are previewing instead of the homepage, you need to add a Link Resolver endpoint. A typical example of this would be:


In your preview settings add an endpoint to the optional Link Resolver field as explained in step 1.

Using the official Prismic Node.js starter project?

If you are using the official Prismic Node.js starter project or any other of our starter projects then you should already have all the code in place that you need for Previews and the Prismic Toolbar!

If you're not using the official Prismic project, then follow the rest of the steps below.

Now you need to add the Link Resolver endpoint in your website application. When requested this endpoint must:

  • Retrieve the preview token from the token parameter in the query string
  • Retrieve the documentId from the query string
  • Call the Prismic development kit with this token and the Link Resolver will retrieve the correct URL for the document being previewed
  • Redirect to the given URL

The Preview Token

Note that the preview token will be a URL. You DO NOT need to follow this url.

Processing the Preview Token with 'getPreviewResolver' method

All you need to do is pass the token into the getPreviewResolver method as shown below. (@prismicio/client kit V4.0.0 and above)

const Prismic = require('@prismicio/client');
const linkResolver = require('./path/to/the/link-resolver.js');
exports.prismicPreview = async (req, res) => {
  const { token, documentId } = req.query;
  const api = await Prismic.getApi('');
  const redirectUrl = await api.getPreviewResolver(token, documentId).resolve(linkResolver, '/');
  cookies.set(...) // set cookie
  res.redirect(302, redirectUrl);

This requires the use of a Link Resolver function so that the preview endpoint knows where to redirect to. You can learn more about link resolving by checking out our Link Resolver page.

Deprecated 'previewSession' method

For anyone using a version of the @prismicio/client kit older than V3.0.1, then you should pass this token into the previewSession method as shown below.

const Prismic = require('@prismicio/client');
const linkResolver = require('./path/to/the/link-resolver.js');
const apiEndpoint = '';
// Example preview endpoint for NodeJS with ExpressJS 
app.get('/preview', function (req, res) {
  const token = req.query.token;
  Prismic.getApi(apiEndpoint, { req: req })
    .then((api) => api.previewSession(token, linkResolver, '/'))
    .then((url) => {
      res.redirect(302, url);

This also requires the use of a Link Resolver function so that the preview endpoint knows where to redirect to. You can learn more about link resolving by checking out our Link Resolver page.


Please make sure to have /preview route at the top of your routes, as the order of the routes is important.

5. Use the correct reference

Are you using the @prismicio/client library?

This last step is only required if you are not using the @prismicio/client library to retrieve your API object.

If you are using the Prismic.client or Prismic.getApi method to retrieve your API object, then the correct reference will automatically be used and this last step is not necessary. If you are not using this method, then do the following:

When you preview your website, a preview cookie is generated that contains the preview token. This token can be used as a valid ref to make Prismic API queries. For any query you make on your website, make sure to check for the Preview cookie and use this preview ref in the query options if the preview cookie exists.

Here is how to retrieve the correct ref:

const Cookies = require('cookies');
const Prismic = require('@prismicio/client');

const cookies = new Cookies(req, res);
const previewRef = cookies.get(Prismic.previewCookie);
const masterRef = api.refs.find(ref => { return ref.isMasterRef === true; });
const ref = previewRef || masterRef.ref;

Then here is an example that shows how to use this ref in your query:

// Then in your query, specify the ref like this
api.query('document.type', 'blog_post'),
  { ref }
).then(function(response) {
  // response is the response object, response.results holds the documents

And with that you should have everything in place that you need to begin previewing your content!

6. Troubleshooting

Mistakes happen. So sometimes you might to do a little troubleshooting to figure out where exactly the problem is from, luckily we've created an article for just that.

Deprecated: In-Website Edit Button

Note: The In-Website Edit Button has been deprecated in favor of the Preview Toolbar, which has an edit button built in.

Was this article helpful?
Not really
Yes, Thanks

Can't find what you're looking for? Get in touch with us on our Community Forum.