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:

// sanity.json
{
  "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, go back to resolveProductionUrl.js and add a function that will receive the full document that was selected for previewing. The function must return a URL to your front end that is adapted to your front end's URL structure. Here's an example:

// ./resolveProductionUrl.js
export default function resolveProductionUrl(document) {
  return `https://my-site.com/posts/${document.slug.current}`
}

Now, you should see an Open preview menu item appear in the document context menu (Three dots in the upper right corner on desktop), mapped to the hotkey Ctrl+Alt+O (or Ctrl+Opt+O on Mac).

Drafts are by default non-public and only visible to authenticated users. This means that in order to preview drafts on your site, you will have to make 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 front end. How to do this depends on whether your front end 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.

// ./sanity.js -- or wherever you initialize the Sanity API in your project.

import sanityClient from '@sanity/client'
const clientForPreview = sanityClient({
  projectId: '<your projectId>',
  dataset: '<your dataset>',
  apiVersion: '2021-08-29',
  token: '<your token with read access only>'
})

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:

// ./sanity.js -- or wherever you initialize the Sanity API in your project.

import sanityClient from '@sanity/client'
const clientForPreview = sanityClient({
  projectId: '<your projectId>',
  dataset: '<your dataset>',
  apiVersion: '2021-08-29',
  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 allow people who are logged into the Studio to read drafts from your single-page app.