Skip to content
Sanity
    • Platform

      Sanity Studio

      Flexible editing environment

      APIs

      Connect to anything

      Content Lake

      Real-time database

      Try product demo

      Features

      Real-time collaboration

      Fearlessly work with content

      Precise content querying

      Treat content as data with GROQ

      Localization

      Coherent messaging across territories

    • Use cases

      E-commerce

      Richer shopping experiences

      Marketing sites

      Control your story

      Products & services

      Innovate and automate

      Mobile apps

      Content backend for every OS

      View all

      Integrations

      Shopify
      Mux
      Vercel
      Netlify
      Algolia
      Cloudinary
      BigCommerce
      Commerce Layer
      Smartling
      Transifex
      View all
    • Learn

      Documentation
      Studio API Reference
      API reference
      Guides
      GROQ cheat sheet
      Sanity UI
      Get started

      Build and share

      Templates
      Tools and plugins
      Schemas and snippets
      Project showcase
      Share your work
      Browse Exchange

      Frameworks

      React
      Vue
      Next.js
      Nuxt.js
      Svelte
      Remix
      Gatsby
      Astro
      Angular
      Eleventy
      View all
    • Discover

      Blog
      Resource library
      Agency partners
      Become a partner
      Technical support
      Talk to sales

      Case studies

      Puma

      Source of truth for global markets

      Aether

      Unique digital shopping experience

      Morning Brew

      Omnichannel media distribution

      InVision

      Delivering exceptional customer experiences

      View all

      Popular guides

      Headless CMS
      Structured content
      Content modeling
      Headless SEO
      Static websites
      View all
    • Enterprise
    • Pricing
    • Log in
    • Contact sales
    • Get started
Contact salesGet started
Published July 12th 2023

Visual Editing: give content teams a GPS for your CMS

Visual Editing streamlines everyday content management with an intuitive, one-click path from website preview content to Studio.

Molly Friederich

Director of Product Marketing at Sanity

Simeon Griggs

Customer Education at Sanity

If you’re responsible for building or maintaining a content management solution, odds are you’re thinking of trading in a traditional monolith CMS in favor of a composable content solution (if you haven’t already!). You want the benefits a modern CMS delivers, including:

  • Scale-driving content reuse that comes with structured content.
  • Developer freedom to work with the languages, frameworks, and solutions that will best meet the needs of content stakeholders.
  • Ability to create innovative content experiences unconstrained by the limits of legacy, rigid CMSes.

While the big-picture benefits are clear, perhaps the day-to-day experience for content stakeholders is less in focus. You might be wary of tradeoffs they’ll experience when content in the CMS is no longer coupled 1:1 with the front end.

We get it. Legacy headless CMSes often have major gaps for content creators, the biggest one being the visualization of the content they create and manage. Sanity has long offered strong preview tooling—and we recently made it even better with innovations like Perspectives and Content Source Maps. And we’re not done yet.

Today, with the launch of Visual Editing, we’re taking the next step: providing a one-click way to jump from your in-browser website preview to your content within Sanity Studio (the editing environment). Given most day-to-day content maintenance and updates start from the front end, this rounds out Sanity’s coverage for the common workflows we see content teams use. Visual Editing is now available with Sanity Enterprise plans.

Sanity co-created and co-launched the first incarnation of Visual Editing with Vercel earlier this year. Now, Visual Editing is available for any Sanity Enterprise customer—regardless of hosting provider or web framework.

A single click cuts through the complexity

With Visual Editing, a new UI is added to your preview deployment that, on hover, provides a blue outline around content elements with a button to “Edit in Sanity Studio.” A single click takes you directly to the source of that content target content within Studio.

Once there, you’re able to make an edit (or inspect the history of that content)—and you can do so with insight as to whether any other documents in your Studio also reference the content at hand. This is an important safeguard when your content is reused across many surfaces, web-based or otherwise.

Read on to learn how we’ve built this to be delightful for both developers and the content teams they build for!

Big benefits for content teams

The most impactful content is dynamic. It must evolve as your company learns what messaging works, as offerings change, and, of course, when the occasional typo is discovered. When updates need to be made, content teams want to do so quickly and confidently. Here’s how Sanity’s Visual Editing supports them:

  • Navigate your Studio from your site. You know your website and web app like the back of your hand, but your content in Sanity Studio likely isn’t a 1:1 mapping of your website (instead, content is organized in a way that works across the many surfaces to which it’s presented). Now, you’ve got the equivalent of GPS for your CMS.
  • Flatten the learning curve. When a new teammate joins, or a colleague is covering for a teammate on vacation, it’s often daunting for them to get the lay of the land. Now, anyone can understand where web content lives within your content model, even if they don’t live and breathe it.
  • Reveal micro-copy. The quiet heroes of your website are often the small-but-mighty things like button labels or product specs. These are often woven throughout your content, making them hard for anyone without a holistic grasp of your content model to find. Now, simply click from the website preview to locate them within Studio.
  • Update with context. Modern content teams scale their work by reusing content, it’s the power of treating content as data. It’s what allows you to make a change once and have it cascade to all the right places. With Sanity, before making a change to content that appears on the website, editors can also see how that content relates to other content types that reference it, giving them context as where else the change will flow.

Visual Editing brings all of this workflow efficiency to your teams within the web preview environment they’re used to living in. The near-magical experience of suddenly having a friendly blue button to click whenever they need to make a change stands to save them hours every week.

Small lift for developers

We want to get Visual Editing into the hands of content creators as fast as possible. To do so, we focused on making it fast to implement and easy to prioritize. Here are a few of the ways we’ve made Visual Editing a great developer experience:

  • Easy setup. With other CMSes, implementing visual editing requires you to add tagging to every element on your site—a daunting task. In contrast, the new @sanity/overlays library automatically adds Visual Editing links to all of your content using Content Source Maps. You then have the option to selectively filter out specific fields from Content Source Maps or, using documented helper functions, conditionally remove that encoded metadata from content strings.
  • Test locally, ship confidently. Making a big change to the preview experience for your content team can be a nail-biter. With @sanity/overlays (the package that contains Visual Editing) you can build and test visual editing on your local machine before releasing to the preview build your team relies on.
  • Compose for your needs. Visual Editing works with any hosting provider and any web framework. Use the updated @sanity/preview-kit, or if you’re using Next.js, grab next-sanity (bonus: if you’re using any React framework, live preview is included!). On a Vercel Pro or Enterprise plan? You can use Visual Editing built into Vercel Preview Deployments. Hosted elsewhere? Simply use @sanity/overlays to bring Visual Editing to life.

To learn more about enabling Visual Editing for your Sanity Enterprise project, click here to read our documentation.

A growing list of reasons to go composable

Visual Editing is just one of several releases for content teams this summer (check out our launch of AI Assist and improvements to previews) that scratch off potential trade-offs you face in modernizing your CMS.

To see them all in action, reach out for a personalized demo with our Sales team, or join us for our Summer Release Demo webinar on August 2. And invite your content friends!


Page content

    • A single click cuts through the complexity
    • Big benefits for content teams
    • Small lift for developers
    • A growing list of reasons to go composable

Product

Sanity StudioAPIsContent LakeSecurity & Compliance
  • Sanity vs Contentful
  • Sanity vs Strapi
  • Sanity vs Wordpress
  • Sanity vs Adobe Experience Manager
  • Sanity vs Hygraph
  • Sanity vs Sitecore
  • Sanity vs Storyblok
  • Sanity vs Contentstack
  • Sanity vs Prismic
  • Sanity vs Drupal
  • Sanity vs ButterCMS

Resources

DocumentationBlogResource libraryCase Studies
  • React Blog
  • Gatsby Blog
  • Next.js Landing Pages
  • Making a PWA
  • Single Page Application
  • Svelte & Typescript App
  • Vue & Tailwind Blog
  • Developer Portfolio Templates
  • Form validation with Yup
  • Live Preview with Next.js and Sanity.io
  • Next.js blog
  • Next.js personal website
  • Clean Next.js + Sanity app
  • Clean Remix + Sanity app
  • Clean SvelteKit + Sanity app
  • All Templates
  • Agency partners
  • Technology partners
  • Headless CMS 101
  • Static Sites 101
  • Headless Commerce 101
  • CMS for enterprise
  • Headless SEO
  • Localization
  • Content as a Service
  • What is a DXP?
  • Typescript 101
  • Ecommerce SEO
  • What is a Composable DXP?
  • What is an API?
  • GraphQL vs REST
  • React CMS
  • Next.JS CMS
  • CMS for Shopify
  • API-first CMS
  • Content platform
  • Multilingual CMS
  • Static Site CMS
  • Gatsby CMS
  • Node CMS
  • E-commerce CMS
  • Vue CMS
  • Angular CMS
  • GraphQL CMS
  • Newspaper CMS
  • Magazine CMS
  • CMS for apps
  • Remix CMS
  • Nuxt CMS
  • SvelteKit CMS
  • Agile CMS
  • Eleventy CMS

Company

Contact SalesEnterpriseCareersTerms of ServicePrivacy PolicyAccessibility Statement

Stay connected

  • GitHub
  • Slack
  • Twitter
  • YouTube
  • Stack Overflow
  • Blog RSS
  • Newsletter
©Sanity 2023