Presentation

Presentation is a tool in the Sanity Studio that lets you work with content directly through preview — be it a website, in-store display, or anything you can point a browser at.

You can see what parts of the page are editable and click directly through to the right field to make your change. This complements the Structure tool (previously named “Desk”), where you find the right field through search, following references, and expanding modals for nested fields.

Presentation saves time when working with visually oriented layouts and complex content models. Using Presentation gets you right to where you want to edit.

You're probably using structured content – so how do you find the many places a document is re-used? The Document Locations Resolver lets developers declare where a document is used in your front-end presentation(s). This makes content edits predictable and safe.

Presentation lets you save effort by using structured content extensively (without the penalty of figuring out where documents are used).

Presentation offers the following features for content creators:

• Interactive, navigable in-Studio preview
• Live-as-you-edit preview updates
• Option to switch between draft and published mode to check your changes against what's currently live
• Comments for in-context feedback and reviews, with notifications and status.
• Overview of content reuse across front ends
• Wide and narrow views to see your work on different devices
• Deep link to edit states for bookmarking and collaboration
• Scroll syncing between preview display and content fields in the document editor

First things first, start by deciding which front ends you want to support with Presentation in your Sanity Studio—you can start with one, like a microsite, or go all in across many surfaces! Because Presentation reflects specific front ends, you'll have a separate tool for each (with a clear view of how content is reused across them!)

Presentation consists of several underlying technologies working together. They should be implemented in sequence.

The Presentation tool comes as a part of your core Sanity Studio installation. A developer points it at any given URL where previews are enabled (you can create multiple Presentation tools in one Studio to support different root URLs), and implements document locations to let you see where documents are being used and preview them.

Configure the presentation tool

For Presentation to show clickable overlays it needs to know where the content comes from; under the hood Content Source Maps gives your front end this extra information. We offer tooling called Loaders to make it easier to support live previews and click-to-edit overlays in your front end, regardless of the framework being used.

Set up Loaders and annotate your site

Fortunately, that's it. For large, existing sites this might be a few days of effort—which will more than pay for itself in editorial time saved. You don't need to do everything at once. Start with page-building routes or particularly complex content models.

For greenfield builds the story is better as mapping out Locations and affordances offers extra benefit: in addition to editorial time savings, it will also make getting around faster for developers during the build. Wonder if you've broken other locations a document is used? Now you can easily go check.

Want to know more about Presentation? Check out the:

• Ready-to-run templates for Next.js and Remix
• Guide: Setting up Presentation with Remix

Already using preview-kit? You don't need to migrate to Loaders yet. We've made preview-kit backward-compatible with Presentation. It will just work. You won't get the fastest real-time previews or the switch between Published and Drafts documents. If you want to migrate to Loaders, you should look at the guides and docs above.

Using GraphQL? Content Source Maps is supported in GraphQL, and we are working on making Presentation available for solutions that use GraphQL from Sanity.

Need Previews outside of Presentation? If you need standalone previews or want to use split panes? You should keep using preview-kit. For the time being Loaders only supports authentication within the Studio context. Consider if you need your previews to be standalone though — maybe you're good with Presentation inside the studio where it sits next to your comments and workflows?