Learn
TracksMastering Content OperationsCoursesStudio excellenceInteractive previews
Studio excellence
Markdown Version

Interactive previews

Log in to watch a video walkthrough of this lesson
Log in
Video thumbnail
Give your authors more confidence to press publish by rendering live updating previews of new drafts or other content releases
Log in to mark your progress for each Lesson and Task
Review Previewing content in presentation in the documentation

Visual editing can be configured for any web front end. There are multiple templates, guides, and code examples for Next.js, Astro, Expo and Remix.

See Visual Editing with Sanity in the documentation

Interactive live preview is the ultimate upgrade for authors inside a headless content management system. There is no substitute for having complete confidence in the impact of your content before pressing publish.

This is usually rendered inside the Presentation tool.

Visual editing is especially powerful when paired with Content Releases so that changes across multiple documents can be stacked and previewed before publishing.

See Content Releases user guide in the documentation
In the Work-ready Next.js track, visual editing is configured during the Integrated Visual Editing with Next.js course.

You may also display individual components directly from your frontends or applications inside the Studio. View panes accept the current values of the document being edited and so can be passed in as props to that component.

See the documentation for getDefaultDocumentNode to see how components can be loaded alongside the editor.

In the example below, an author is presented with a layout preview of what this property will look like in a search result while authoring the document.

Mark lesson as complete
You have 1 uncompleted task in this lesson
0 of 1