Configuring Presentation

Everything you have configured so far has been to prepare the site for when it is put into Draft Mode. To do this securely and automatically, you'll install and configure the Presentation plugin. It will handle creating and requesting a URL to enable Draft Mode with a secret string in the URL that is checked in your API route.

It is also the most convenient way to browse and edit the website in Draft Mode, with an iframe displaying an interactive preview inside the Sanity Studio.

First you'll need to add the plugin to your Sanity Studio configuration.

// ...all other imports
import { presentationTool } from 'sanity/presentation'

export default defineConfig({
  // ... all other config settings
  plugins: [
    // ...all other plugins
    presentationTool({
      previewUrl: {
        previewMode: {
          enable: '/api/draft-mode/enable',
        },
      },
    }),
  ],
})

Notice how the plugin's configuration includes the "enable" API route you created in the previous lesson. Presentation will visit this route first, confirm an automatically generated secret from the dataset, and if successful, activate draft mode in the Next.js application.

You should now see the Presentation tool in the top toolbar of the Studio or by visiting http://localhost:3000/studio/presentation where you can navigate the site and click on any Sanity content to open the document – and focus the field – from which that content came.

Because of the previewDrafts perspective, the post index route now displays a list of draft and published post documents. The latest draft content should appear on already published post documents.

Make edits to any content, and you should see them reflected live on the page.

Success! You now have an interactive live preview conveniently located within your Sanity Studio. Content authors can browse the front end to find pieces of content they need to edit and instantly see the impact of their changes before pressing publish.

We can go deeper. In the next lesson, you'll make the experience of switching between the Structure and Presentation tools even better.