Bringing Click-to-Edit Workflows to Markdown Content

TinaCMS has added support for Vercel's Visual Editing in Preview Deployments, aiming to close the gap between the developer-friendly nature of a headless CMS and the real-time editing experience marketers expect.

The headless CMS model gives developers freedom to build with any modern framework, but that decoupling often comes at the cost of content editors' productivity. Preview Deployments improve the review process, but locating and modifying the right piece of content—especially when it is deeply nested—can still involve friction. Visual Editing is designed to address that friction.

How TinaCMS Approaches Content Storage

TinaCMS stores content in files such as Markdown, MDX, and JSON, keeping it in sync with a Git repository. Content editors work on branches, and a Data Layer lets you fetch Markdown content as you would from any headless CMS. The data layer can be self-hosted with any KV store, including Vercel KV.

This file-based approach delivers several operational benefits:

  • Version control for content
  • Branch workflows for content creators
  • Content isn't locked into a vendor database
  • Scaling Markdown to tens of thousands of pages
  • Separate repositories for code and content
  • Incremental Static Regeneration (ISR) and Server-Side Rendering (SSR) for Markdown
  • Consistent data structure enforced across content files via the Tina Schema

The fact that content lives in Markdown-backed files is also what makes Visual Editing support possible, according to the Tina team.

The Editing Experience

With Visual Editing, a Vercel Preview Deployment appears in an iframe next to the CMS editing interface, letting editors see the site and the CMS side by side. Clicking an element allows direct editing and updates are reflected without leaving the page or opening a new tab. Tina's team compares the resulting UX to what you'd get with a tool like Wix, but connected to an open-source framework and headless CMS underneath.

One notable aspect of Vercel's Visual Editing is the developer experience: It can be enabled without modifying frontend templates. That aligns with Tina's broader mission of bringing visual editing to the headless CMS space without overburdening developers.

Getting Started

The collaboration brings Visual Editing to Markdown-based content, opening a path to a workflow where marketers and developers can both work comfortably: editors get click-to-edit capabilities, while developers maintain the flexibility of a Git-backed, file-based content pipeline.

More details are available in the documentation on GitHub, or via email at [email protected].