Understanding Visual Editing

Simeon GriggsPrincipal Educator at Sanity

Content creators will find it highly beneficial to preview the impact of their work before pressing publish. An interactive live preview will give them greater confidence to do so.

Visual Editing is the catch-all term for the ability for content creators to make and see the impact of content changes in real-time, even when working on draft documents. It also describes navigating the website to find and edit content instead of browsing through document lists in the Sanity Studio Structure tool.

Once you have completed this course, you will:

• Know how to create, store, and access Sanity project tokens so your application can query for private documents such as draft documents.
• Enable Next.js "draft mode" for authenticated users to put your application into a dynamic state.
• Configure the Presentation plugin to browse and edit the application within Sanity Studio.
• In the Studio, configure document "locations" so content creators can move quickly between the Structure and Presentation tools.
• Switch data fetching to React Loader for enhanced Visual Editing with faster previews.

The following terms describe the functions that combine to create an interactive live preview: Visual Editing.

Visual Editing can be enabled on any hosting platform or front end framework.

• Perspectives modify queries to return either draft or published content. These are especially useful for server-side fetching to display draft content on the initial load when previewing drafts.
• Content Source Maps aren't something you'll need to interact with directly, but they are used by Stega encoding (below) when enabled. They are an extra response from the Content Lake that notes the full path of every field of returned content.
• Stega encoding is when the Sanity Client takes Content Source Maps and combines every field of returned content with an invisible string of characters, which contains the full path from the content to the field within its source document.
• Overlays are created by a dedicated package that looks through the DOM for these Stega encoded strings and creates clickable links to edit documents.
• Presentation is a plugin included with Sanity Studio to simplify displaying a front end inside an iframe with an adjacent document editor. It can communicate directly with the front end instead of making round-trips to the Content Lake for faster live preview.
• Draft mode is a Next.js-specific way of enabling, checking, and disabling a global variable available during requests, primarily used to make your application query draft content.
  • In other frameworks, you might replace this with an environment variable, cookie, or session.

Let's get started.