What Is Visual Editing, Again?
Visual editing has been around since the early days of the web. Anyone who has used Dreamweaver in the past probably experienced an early version of visual editing.
Visual editing is when you can see a live preview of your site while youâ€™re editing content. It gives the content creator an instantaneous visual feedback loop and shows their changes in the context of their site.There are two defining features of visual editing:
- A live preview so content creators can see their changes reflected in the context of their site.
- Clickable page elements in the preview so content creators can easily navigate to the right form fields.
Visual editing has been standard among no-code and low-code site-builders like Squarespace, Wix, and Webflow. But those tools are not typically used by developers who want control over their tech stack. Fortunately, now weâ€™re seeing visual editing come to headless CMSs.
Visual Editing In A Headless CMS
A headless CMS treats your content more like a database thatâ€™s decoupled from the rendering of your site.Until recently, headless CMSs came with a big tradeoff: content creators are disconnected from the front end, making it difficult to preview their site. They canâ€™t see updates as they make them.
A typical headless CMS interface just provides form fields for editing content. This lacks the context of what content looks like on the page. This UX can feel archaic to people who are familiar with real-time editing experiences in tools like Google Docs, Wix, Webflow, or Notion.Fortunately, a new wave of headless CMSs is offering visual editing in a way that makes sense to developers. This is great news for anyone who wants to empower their team with an editing experience similar to Wix or Squarespace but on top of their own open-source stack.Letâ€™s compare the CMS editing experience with and without visual editing on the homepage of Roev.com.
You can see that the instant feedback from the live preview combined with the ability to click elements on the page makes the visual editing experience much more intuitive. The improvements are even more dramatic when content is nested deep inside sections on the page, making it hard to locate without clicking on the page elements.
Headless CMSs That Support Visual Editing
Many popular headless CMS offerings currently support visual editing. Letâ€™s look at a few of the more popular options.
TinaCMS was built from the ground up for visual editing but also offers a â€œbasic editingâ€ mode thatâ€™s similar to traditional CMSs. Tina has an open-source admin interface and headless content API that stays synced with files in your Git repository (such as Markdown and JSON).
Storyblok is a headless CMS that was an early pioneer in visual editing. Storyblok stores your content in its database and makes it available via REST and GraphQL APIs.
Sanity.io (via their iframe plugin)
Sanity is a traditional headless CMS with an open-source admin interface. It supports visual editing through the use of its Iframe Pane plugin. Sanity stores your content in its database and makes it available via API.
Builder.io is a closed-source, visual-editing-first headless CMS that stores content in Builder.ioâ€™s database and makes it available via API.
Stackbit is a closed-source editing interface thatâ€™s designed to be complementary to other headless CMSs. With Stackbit, you can use another headless CMS to store your content and visually edit that content with Stackbit.
Although itâ€™s not a CMS, Vercelâ€™s Deploy Previews can show an edit button in the toolbar. This edit button overlays a UI that helps content creators quickly navigate to the correct location in the CMS.
Now that developers are adding visual editing to their sites, Iâ€™m seeing content creators like Maria become super productive on a developer-first stack. Teams that were slow to update content before switching to visual editing are now more active and efficient.There are many great options to build visual editing experiences without compromising developer-control and extensibility. The promise of Dreamweaver is finally here!