Preview content on site
Add a link to preview drafts on your front end
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.
- Install the
@sanity/production-preview
plugin withsanity install @sanity/production-preview
- Create a file called (for example)
resolveProductionUrl.js
(we'll get back to that file in a bit). - Open your studio's
sanity.json
, and add the following entry to theparts
-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>'
})
Gotcha
We recommend generating a dedicated token with read-only access. 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:
// ./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.
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.
Protip
Check out this guide if you're looking for live preview with Next.js and Sanity.