Install Preview Extension for Sanity

With the launch of Content Sync, Gatsby Cloud now offers an "Open Preview" button for Sanity Studio. This button is available from the document editor and requires Gatsby Cloud Builds.

Update Sanity and Gatsby

npm i gatsby@latest

npm i gatsby-source-sanity@latest

Install Studio Plugin

Navigate to your Sanity Studio project, and install the following package:

npm i sanity-plugin-gatsby-cloud-preview

Install Document Action

The document actions extension is available by default. You will, however, need to configure and set up the Gatsby Preview.

You can add a document actions resolver into your studio instance by declaring it in sanity.json file:

// sanity.json 
//... 
"parts": [ 
//... 
{ 
"implements": "part:@sanity/base/document-actions/resolver", 
"path": "resolveDocumentActions.js" 
} 
]

The path will point to the document resolver file, which will be configured in the next step. If you do not have existing customizations, the file needs to be created.

Open Preview Button will need to be appended on the existing document actions list. If you do not have existing customizations, the Open Preview action can be added as following (within studio):

// resolveDocumentActions.js
// import the default document actions

import defaultResolve from "part:@sanity/base/document-actions";
import { gatsbyPreviewAction } from "sanity-plugin-gatsby-cloud-preview";
export default function resolveDocumentActions(props) {
    return [...defaultResolve(props), gatsbyPreviewAction];
}

If you have existing document actions configuration, you can append gatsbyPreviewAction to the return of the resolveDocumentActions function.

Make sure SANITY_STUDIO_CONTENT_SYNC_URL is set as an environmental variable for your Studio instance. You can retrieve this URL by navigating to your site's Gatsby dashboard and navigating to Site Settings.

You're all set!

With those changes, editors will now be able to open preview directly from the Sanity Studio editor.