The Presentation tool

The Presentation Tool enables Visual Editing by integrating a live preview of your web application within Sanity Studio.

It provides:

• A side-by-side editor and live preview experience.
• Click-to-edit functionality for seamless navigation between content and the front-end
• A way for content creators to share a preview with others

• Live Preview: Embeds your front-end application directly into Sanity Studio for real-time updates.
• Document Mappings: Maps documents to URLs with the resolver API, letting you see where content is used .
• Multi-Environment Support: Configure preview URLs for different environments (e.g., staging, production) using environment variables

To use the Presentation tool, your studio must be updated to v3.40.0 or preferably latest.

npm install sanity@latest

You must also add Visual Editing support into your front-end application. We recommend exploring the implementation guides (located in the left-side navigation), these will also take you through setting up the Presentation tool.

Similarly to the other tools and plugins, you add the Presentation tool to your main studio configuration file. The example below shows a typical setup for a Next.js project where specific endpoints are supplied to let Sanity Studio put the front end into preview mode.

1. Import presentationTool from sanity/presentation
2. Add it to the plugins array
3. Add your frontend-specific details, such as the origin URL and endpoints for enabling or disabling preview mode

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

export default defineConfig({
  // ... all other config settings
  plugins: [
    // ...all other plugins
    presentationTool({
      previewUrl: {
        origin: 'https://my-cool-site.com',
        previewMode: {
          enable: '/api/draft-mode/enable',
          disable: '/api/draft-mode/disable',
        },
      },
    }),
  ],
})

To map Sanity documents to their corresponding front-end routes, create a locations resolver function. This function tells the Presentation Tool how each document type corresponds to a route in the front end.

In the example below, we map documents of type product to /products/${slug} and add them to the top-level index. You will need to substitute your own types and routes as appropriate.

// ./lib/presentation/resolve-production-url.ts
import {defineLocations} from 'sanity/presentation'

export default defineLocations({
  // Map document types to frontend routes
  product: {
    select: {title: 'title', slug: 'slug.current'},
    resolve: (doc) => ({
      locations: [
        {title: doc.title, href: `/products/${doc.slug}`},
        {title: 'Products Index', href: `/products`},
      ],
    }),
  },
  // ...
})

import {defineConfig} from 'sanity'
import {presentationTool} from 'sanity/presentation'
import resolveProductionUrl from './lib/presentation/resolve-production-url'

export default defineConfig({
  // ...
  plugins: [
    presentationTool({
      resolve: resolveProductionUrl,
      previewUrl: {
        origin: 'https://my-cool-site.com',
        previewMode: {
          enable: '/api/draft-mode/enable',
          disable: '/api/draft-mode/disable',
        },
      },
    }),
  ],
})

The Presentation tool takes the following configuration attributes:

Optionally, you can enhance the Presentation tool with a custom document navigator component to help users select different documents or views in the front-end UI.

Example:

// Import your custom navigator component
import {NavigatorComponent} from './presentation/NavigatorComponent'

export default defineConfig({
  // Your configuration for the project
  // ...

  plugins: [
    presentationTool({
      // ...
      component: {
  			// Pass the custom component to the plugin
        unstable_navigator: NavigatorComponent
      },
    })
  ],
})