Preview content on site

When editing content that will be published on a website, it is useful to be able to preview how it will appear. Here's how you provide a link from the content studio to a preview path on your site.

1. Install the @sanity/production-preview plugin with sanity install @sanity/production-preview
2. Create a file called (for example) resolveProductionUrl.js (we'll get back to that file in a bit).
3. Open your studio's sanity.json, and add the following entry to the parts-array:

{
  "plugins": [
    "@sanity/production-preview"
  ],
  "parts": [
    //...
    {
      "implements": "part:@sanity/production-preview/resolve-production-url",
      "path": "./resolveProductionUrl.js" <-- point to the path of the resolveProductionUrl.js you created in step 2
    }
  ]
}

Now, get back to resolveProductionUrl.js and add a function that receives a document and returns an url to it, for example:

export default function resolveProductionUrl(document) {
  return `https://my-site.com/preview/${document._id}`
}

Now, you should see an Open preview menu item appear in the menu next to the publish button in your studio, mapped to the hotkey Ctrl+Alt+O (or Ctrl+Opt+O) on Mac.

Open preview menu item

Drafts are by default non-public and only visible to authenticated users. This means that in order to preview drafts on your site, your will have to do authenticated requests to the Sanity API to fetch the draft document. As a consequence, you need to make sure that you can access the draft document from your frontend. How to do this depends on whether your frontend renders the preview server side or client-side, in the browser.

If you render pages server side, you will have to pass a token to our API when requesting a draft document.

const sanityClient = require('@sanity/client')
const clientForPreview = sanityClient({
  projectId: '<your projectId>',
  dataset: '<your dataset>',
  token: '<your token with read access only>'
})

Gotcha

We recommend generating a dedicated token with read access only. Since the token gives read access to non-public documents, you should also make sure you prevent it from being exposed publicly (especially if you write isomorphic/universal apps where JavaScript is shared between server and client).

If you do all the rendering client side, you don't have to worry about tokens, but you still need to make sure the browser makes authenticated API requests when fetching the draft document.

If you have configured the Sanity client with useCdn: true (which we recommend), you should instantiate a separate client for previewing drafts. Here's an example:

const sanityClient = require('@sanity/client')
const clientForPreview = sanityClient({
  projectId: '<your projectId>',
  dataset: '<your dataset>',
  useCdn: false,
  withCredentials: true
})

The withCredentials option makes sure the browser passes on the authentication cookie set on the Sanity API when requesting content, and will people logged into the Content Studio be able to read drafts from your single page app.

Gotcha

If you send a preview link to an unauthenticated user they won’t be allowed to see the draft. Remind them to log in.