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

Previewing drafts

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.

Server side

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

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).

Browser side (SPA)

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:

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.