How Sanity live preview works
The platform basics are in what Sanity is and how it works. A live preview setup has four parts:
Drafts perspective. Preview queries use the drafts perspective, which returns content as if every draft had been published. Since API version
2025-02-19the default perspective is published, so preview code must request drafts explicitly. Draft-perspective queries bypass the API CDN, so preview clients should setuseCdntofalse.Read token. A token that reads drafts for preview should have viewer rights or lower.
Draft mode route. The
previewMode.enablesetting points to a frontend route that switches on draft mode when the preview opens.Live Content API. Live updates rely on the Live Content API, where clients listen for content identifiers called sync tags.
Sanity's perspectives reference lists the options a query can pass.
Key features
Perspective switching. Editors can switch the preview between drafts, a content release, and published content using the Global perspective menu.
Any framework. Live preview in the Presentation Tool works with any frontend that implements the visual editing protocol.
Built into Studio. The Presentation Tool has shipped inside the
sanitypackage since v3.20.0, while theallowOriginsoption needs v3.85.0 or later.Renamed perspective. The drafts perspective used to be called
previewDraftsand both names still work, withdraftsas the current name.
In Next.js, defineLive needs a server token and a browser token to fetch draft content in Draft Mode. The browser token is only used when Draft Mode was started by the Presentation Tool or the Vercel Toolbar. The SanityLive component listens for content changes and refreshes data fetched with sanityFetch.
For click-to-edit on top of the preview, see Sanity Visual Editing. Marketing teams comparing platforms can check preview against the other criteria in our headless CMS guide for marketers.
What Pagepro checks before shipping live preview
Pagepro's Sanity development team profiles the query count per page render before building live preview on an inherited codebase. Per-component (N+1) queries make every preview refresh slow, so the team consolidates them into single fetches first. In preview, stega-encoded strings break string comparisons, so the code runs stegaClean() on a value before comparing it.
Sources
- Preview and page buildingSanity · sanity.io
- Live Content APISanity · sanity.io
- PerspectivesSanity · sanity.io
- Set up live content in your appSanity · sanity.io
- Configuring the Presentation ToolSanity · sanity.io