# Headless CMS visual editing: how it works and what it costs

*Source: https://www.editorstack.cc/use-cases/headless-cms-visual-editing — last updated 2026-08-19. Licensed CC BY 4.0 with attribution to EditorStack.*

## Summary

- Headless CMS visual editing is click-to-edit over a live preview of your own front end, not drag-and-drop page building — and confusing the two is the most common cause of a disappointed content team.
- Storyblok and Sanity include visual editing in their free tiers; Contentful sells it as a quote-only add-on; Directus's version is newer and less complete.
- The integration cost is real: a preview bridge for Storyblok, source annotations threaded through your rendering layer for Sanity, component registration for Contentful Studio.

## What visual editing means here

It does not mean dragging boxes around a canvas. In a headless CMS, visual editing means:

1. your front end renders inside the CMS in a preview pane;
2. rendered elements carry markers linking them to the entries that produced them;
3. clicking an element opens that entry's fields.

Content stays typed and structured. Layout stays in code. Editors get context instead of a form.

This is a genuinely good pattern, and it disappoints anyone who was promised a page builder. Manage
that expectation before adoption, not after.

## The four, and what each actually does

**[Storyblok](/libraries/storyblok)** — the most approachable. A bridge script plus preview URLs and
your content team is working. Visual editing in every tier including the free one. Pricing attaches
per space, which matters for agencies.

**[Sanity](/libraries/sanity)** — the most developer-controlled. The Studio is React code in your
repository, packages are MIT licensed, and the Presentation tool decorates your real front end. Free
plan supports up to 20 seats with visual editing included. Requires threading source annotations
through your rendering layer.

**[Contentful Studio](/libraries/contentful-studio)** — the most composition-oriented and the least
transparent. Register React components and users assemble experiences. Sold as a quote-only add-on on
top of platform pricing.

**[Directus](/libraries/directus)** — the only self-hostable one. Live preview and editable overlays
over data in your own SQL database, free below $5M annual revenue under a BSL 1.1 licence. Its visual
editing is newer than the others'.

## The integration cost nobody quotes

Every one of these requires work in your front end, and a half-finished implementation is worse than
none because editors learn not to trust it.

- **Storyblok:** a bridge script, preview URLs and draft handling. Contained.
- **Sanity:** source annotations threaded through your rendering layer so overlays know which document
  produced which element. The most invasive of the four.
- **Contentful Studio:** component registration with the experiences SDK, plus the constraints that
  brings.
- **Directus:** preview and overlay setup, on a feature set that is still maturing.

Budget it properly. This is the line that gets cut when a project runs late, and cutting it removes
the reason you chose the product.

## Choosing

Ask three questions.

**May content leave our infrastructure?** No means Directus, and the comparison ends.

**Are we already on Contentful?** Yes usually means Studio, because consolidation beats a second
vendor. No usually means not Contentful, because buying into an enterprise CMS to obtain visual
editing is an expensive route.

**Who has time — developers or the content team?** Developers with time and a taste for owning the
interface pick Sanity. Teams that need the content team working next week pick Storyblok.

## When none of them is the answer

If your own customers are meant to edit — a multi-tenant SaaS where each customer maintains their own
pages — no CMS here qualifies. Their editors are hosted products for your organisation.

That requirement points to an embeddable library, and
[Puck vs Storyblok](/compare/puck-vs-storyblok) is the comparison that makes the boundary explicit.
The [headless CMS category page](/categories/headless-cms-visual-editing) lists all four with our
verified facts.


## Frequently asked questions

### What is visual editing in a headless CMS?

Your front end runs inside the CMS in a preview pane, and clicking a rendered element selects the content entry that produced it. Editors work against the real site instead of a form, while the content stays structured.

### Which headless CMS has the best visual editing?

Storyblok for approachability and speed of setup; Sanity for developer control, with visual editing included on its free plan; Contentful Studio for free-form composition if you are already a Contentful customer.

### Can a headless CMS replace a page builder?

Only if the layout comes from components your developers ship. If users need to arrange and style freely, a CMS is the wrong category and an embeddable page builder is the right one.

### Is visual editing free in any of them?

Yes — Sanity includes it on a free plan supporting up to 20 seats, and Storyblok includes it in every tier including the free Starter. Contentful publishes no Studio price at all.