Click, edit, done: Introducing Visual Editing (ssr)

Written by Even Westvang

Missing Image!

Today we’re launching a breakthrough capability for Vercel and Sanity customers: Visual Editing.

Visual Editing allows you to click on content blocks within a Vercel preview deployment and jump to the content’s exact location within Sanity Studio to make an update.

This new workflow substantially reduces the time it takes to make changes (and gives context as to where the updated content may be reused across digital experiences). The best part? developers can enable this feature without making any changes to their front-end code.

A tough tradeoff: When headless CMSes mean less intuitive editing workflows

As expectations for content personalization, localization, and channel consistency continue to increase, companies are increasingly moving away from monolith CMS solutions that tightly couple content to a single front end presentation.Thousands of customers have switched to the Sanity Composable Content Cloud to empower their teams with a modern content management solution. In doing so, they’ve unlocked value beyond the standard benefits of headless CMSes, including:

1. Expressive content modeling that mirrors how teams think about and want to work with their content.
2. A flexible, API-centric single source of truth for all content within their organization that reduces maintenance overhead increases content reuse.
3. A deeply customizable editorial environment, Sanity Studio, that unleashes content creativity and efficiency for editors to create differentiating digital experiences.

To date, however, there has been a tradeoff of some valued visual editing affordances embedded in legacy monolith CMSes. While editorial teams value the benefits of headless architectures, like faster site performance and flexible customization, of headless CMSes, they may worry that editing workflows will become less familiar and efficient.

Introducing Visual Editing

In collaboration with Vercel, Sanity now provides editors with a streamlined workflow to make content changes without needing to have a full mental model of exactly where that content lives within the Sanity Studio. With Visual editing, editors can click directly from their Vercel build and jump directly to the content within Sanity Studio.

Updating content is just a click away

Visual Editing allows teams to start from the context of where content is presented and quickly understand its context and use with just one click. When you enable edit mode in a Vercel preview deployment, every piece of content becomes a portal to exactly where authors can edit content in Sanity Studio.

Simply click “edit” on any piece of content on your Vercel build—including videos, images, and rich text—and the Sanity Studio will open to that piece of content.

To save even more time, you’ll see a new version of your site within seconds of publishing as we only rebuild the content that changed across your experience (thanks to Vercel’s incremental static regeneration)

Change once, change everywhere

Sanity’s composable content solution is designed for teams to create a single source of truth for content that flows to multiple parts of your web experience (and beyond).

Visual Editing provides a direct link from one front-end presentation to where content is authored within the Studio. Once in Sanity Studio, you’ll be able to understand how content is used in other parts of your web experience, and can make the update globally. If you’ve ever spent time hunting down outdated pricing or updating an author’s bio photo, you’ll appreciate the immense time savings!

No front-end changes required

In designing Visual Editing, we wanted to ensure that you could get started quickly without needing to redesign your content architecture. Because Visual Editing works from your front-end code, you may think that this would require inserting data on every page component to give Sanity instructions as to what content within Studio to open.

To streamline your path to implementation, we’ve built this in a way that doesn’t require any changes to your front-end code. We’ve introduced a new API and specification for annotating JSON content called Content Source Maps, a payload sent along with GROQ queries containing the information needed for your front-end to deeply link to content authored within Sanity Studio.

We’re excited to further develop this standard and support more hosting platforms and front-end frameworks in the future. For more information on Content Source Maps, check out this announcement post.

Vercel + Sanity: the modern, composable content stack

Our exclusive launch of Visual Editing with Vercel builds on top of the many features that we’ve introduced to provide unparalleled developer and editor experiences in the composable era. Developers can use our powerful Studio customization framework to create intuitive content authoring experiences. Editors can use portable text, intelligent image cropping and scaling, and real-time previews to increase efficiency (while enjoying incredibly fast update times). The Sanity Composable Content Cloud is a modern CMS that saves teams time and increases content ROI.

Visual Editing is now available for all Sanity plans.