# Sanity visual editing review: click-to-edit over a live front end

*Source: https://www.editorstack.cc/libraries/sanity — last updated 2026-08-19. Licensed CC BY 4.0 with attribution to EditorStack.*


## Summary

- Sanity is a headless content platform whose Presentation tool adds click-to-edit overlays on a live preview of your front end, connecting rendered elements back to the documents that produced them.
- The @sanity/visual-editing package is MIT licensed and has been on npm since February 2024; visual editing is available on every plan including the free tier, which supports up to 20 seats.
- There is no drag-and-drop page composition: Sanity edits structured documents, and layout remains code. That is a deliberate design position, not a missing feature.

## Quick facts

| Fact | Value |
| --- | --- |
| Type | cms |
| Licence | MIT |
| First release | 2024-02 |
| Language | TypeScript |
| Frameworks | React, Vue |
| SSR support | full |
| Bundle (min+gzip) | Not measurable |
| Pricing | from $15/mo |
| npm weekly downloads | 664,282 |
| GitHub stars | 64 |
| Latest version | 6.1.2 |
| Last verified | 2026-08-19 |
| Drag & drop canvas | No |
| Responsive breakpoints | No |
| Visual style manager | No |
| Custom components | Yes |
| Data binding | Yes |
| E-commerce blocks | No |
| Email HTML export | No |
| AI generation | Partial |
| Editor i18n | Yes |
| White label | No |
| Self-hosted | Partial |

## What Sanity visual editing is, and who it is for

Sanity's position in this dataset is the most opinionated: content should be structured, layout
should be code, and visual editing should be a way of navigating structured content rather than a way
of designing pages.

The Presentation tool implements that. Your front end renders with source annotations; the Studio
shows it in a preview pane; clicking an element opens the document field behind it. Editors get the
context of the live site without gaining the ability to restyle it.

That suits engineering-led teams with real content models — product catalogues, documentation,
multi-surface content — and frustrates marketing teams who expected Webflow. Knowing which of those
describes your organisation before you buy is most of the evaluation.

## Architecture

Three parts. The **content lake** is the hosted data store. The **Studio** is an open-source React
application that lives in your repository, which means the editing interface is code you can modify —
genuinely unusual, and the reason Sanity appeals to teams who dislike black-box admin panels. The
**visual editing package** connects rendered output to documents through source annotations.

The overlay approach explains both the strength and the limit. Because it decorates your real front
end, there is no canvas to drift from production. Because it decorates rather than composes, it
cannot offer drag-and-drop layout.

## How we assessed it

We have not run Sanity hands-on under our test procedure, so no score and no code sample appear here,
per our [methodology](/methodology). Registry metadata confirms the MIT licence, publication history
and current version of the visual-editing package; pricing comes from the vendor's published page
with the date we checked it.

## Strengths

**The editing interface is yours.** The Studio is open source and lives in your repository, so
customising it is a code change rather than a support ticket.

**Visual editing on the free plan.** Not gated behind an enterprise tier, which is unusual in this
category.

**Structured content, properly done.** The data model is the product's strength, and it holds up when
content genuinely needs to serve several surfaces.

**MIT-licensed packages.** The client libraries and the visual-editing layer are open source, so
inspection and patching are possible.

**A generous free tier.** Up to 20 seats is enough for a real team, not just an evaluation.

## Limitations

**No drag-and-drop composition.** If stakeholders expect to rearrange a page visually, this will
disappoint them, and no amount of modelling fixes that expectation gap.

**React-first.** Visual editing outside React is community territory.

**Usage-based costs need modelling.** API requests, bandwidth and asset storage all meter beyond the
plan allowances, and surprise bills in this category usually come from there.

**The content lake is hosted.** The Studio runs anywhere; the data does not.

**Annotation setup is developer work.** Source annotations must be threaded through your rendering
layer for the overlays to work, and a partial implementation gives editors an inconsistent
experience.

## Pricing

Vendor-published: free plan with up to 20 seats, two datasets and stated request allowances; Growth
around $15 per seat per month billed monthly (roughly $12 annually); Enterprise by quote for SSO,
audit logs and data residency.

If drag-and-drop layout is the actual requirement, compare with
[Storyblok](/compare/storyblok-vs-sanity) and [Contentful Studio](/compare/sanity-vs-contentful-studio),
and if the editor needs to live inside your own product rather than in a CMS, look at
[Puck](/libraries/puck) or [GrapesJS](/libraries/grapesjs) instead.

## Questions to ask before you buy

1. **What will our usage cost beyond the plan allowances?** API requests, CDN requests, bandwidth and
   assets all meter; get a modelled figure for your traffic.
2. **How much work is threading source annotations through our rendering layer?** This is the real
   integration cost of visual editing here.
3. **What is the upgrade story for the Studio living in our repository?** Owning the code means owning
   the upgrades.
4. **Can we meet our data residency requirement?** The content lake is hosted; residency options are
   an Enterprise conversation.
5. **How do we model a page builder if stakeholders insist on one?** Ask for the reference pattern
   before promising the feature.
6. **What happens to visual editing when a document type changes shape?**

## Where it sits in this dataset

Sanity is the most developer-owned CMS profiled here: the editing interface is code in your
repository, the client packages are MIT licensed, and the visual editing layer decorates your real
front end rather than replacing it with a canvas.

That makes it the natural comparison against [Storyblok](/compare/storyblok-vs-sanity), which trades
that ownership for a more polished hosted app that non-technical teams adopt faster. Against
[Contentful Studio](/compare/sanity-vs-contentful-studio), Sanity includes visual editing on the free
plan where Contentful sells it as a quote-only add-on — a large practical difference for a team
trying to make a decision this quarter.

The boundary worth restating: none of the three composes layout freely. If a stakeholder is
describing drag-and-drop page building, the honest answer is that they want a different category, and
the [comparison table](/) shows which products are in it.

## Who it fits, and who it does not

**Good fit**

- React and Next.js teams that want overlay-based click-to-edit on top of an existing front end
- Content models that are genuinely structured, where free-form page building would be a regression
- Teams that want the editing studio itself version-controlled in their own repository

**Poor fit**

- Drag-and-drop page composition, which the Presentation tool deliberately does not provide
- Products embedding an editor for external end users
- Teams needing the content lake self-hosted, since the hosted dataset is the product


## Sanity Visual Editing against its nearest neighbours

| Product | Type | Licence | Frameworks | Bundle (min+gzip) | Price from | Self-hosted | White label | Score |
| --- | --- | --- | --- | --- | --- | --- | --- | --- |
| [Sanity Visual Editing](https://www.editorstack.cc/libraries/sanity) | cms | MIT | React, Vue | Not measurable | from $15/mo | Partial | No | not scored |
| [Contentful Studio](https://www.editorstack.cc/libraries/contentful-studio) | cms | MIT | React | Not measurable | Quote only | No | No | not scored |
| [Storyblok](https://www.editorstack.cc/libraries/storyblok) | cms | Proprietary | Any (framework-agnostic) | Not measurable | Free tier, paid plans undisclosed | No | No | not scored |
| [Builder.io](https://www.editorstack.cc/libraries/builder-io) | sdk | Proprietary | React, Vue, Angular | Not measurable | from $19/mo | No | Partial | not scored |


## Our scores

Not scored. We publish scores only for products we have run hands-on; see the methodology page.


## Alternatives

- [Sanity Visual Editing vs Contentful Studio](https://www.editorstack.cc/compare/sanity-vs-contentful-studio)
- [Sanity Visual Editing vs Storyblok](https://www.editorstack.cc/compare/storyblok-vs-sanity)


## Frequently asked questions

### Does Sanity have a page builder?

Not a drag-and-drop canvas. Teams build page-builder-like experiences by modelling an array of section types and rendering them, and the Presentation tool then gives click-to-edit over the result — but layout freedom stays with developers.

### How much does Sanity cost?

Vendor-published: a free plan supporting up to 20 seats, Growth at about $15 per seat per month billed monthly (around $12 annually), and Enterprise by quote. Visual editing is included on the free plan.

### Is Sanity open source?

Partly. The Studio and packages such as @sanity/visual-editing are open source under MIT and run in your own repository; the hosted content lake behind them is the commercial service.

### Which frameworks does visual editing support?

React and Next.js are the first-class path, with community support elsewhere. The overlay mechanism depends on annotating rendered output, so framework support follows the SDK.


## Sources

1. [npm registry metadata for @sanity/visual-editing (MIT licence, first publish date, latest version)](https://registry.npmjs.org/@sanity/visual-editing) — accessed 2026-08-19
2. [Sanity pricing page (vendor-published plan prices)](https://www.sanity.io/pricing) — accessed 2026-08-19
3. [Sanity visual editing documentation](https://www.sanity.io/docs/visual-editing) — accessed 2026-08-19