Visual Editing

Visual Editing refers to a set of features that together enable content editors to work within a live visual presentation layer in Sanity Studio. This article will take a conceptual approach and introduce the different components that make up the Visual Editing experience,

In order to enable Visual Editing, a few things must be in place.

The Presentation tool is the primary interface for Visual Editing that content editors interact with. Once configured, it's accessible from the top menu bar in Sanity Studio and enables loading a website or application directly within the studio environment.

Using a split-screen view, the Presentation tool displays the familiar Sanity Studio document editor side-by-side with a live, interactive preview of how that content will render in the front end. This allows content editors to see their changes in real-time in the context of the actual website or app.

Using the Perspectives feature, you can easily switch between fetching only published content suitable for production using the published perspective, or fetching all staged drafts using the previewDrafts perspective, which is suitable for previewing your planned updates.

Overlays are interactive visual indicators that appear on top of the front end. They allow content editors to click on specific elements and edit the corresponding content directly in the studio. Overlays provide a seamless connection between the visual presentation and the underlying content structure. In order to render these helpful elements, metadata about the content's origin is embedded using Content Source Maps and encoded invisibly into the front end using Stega encoding.

These toolkits comes with loaders and other tooling built-in:

Loader packages for frameworks and languages: