For content teams working with static sites, the gap between what you see and what you edit has always been frustratingly wide. They update a markdown file, commit their changes, wait for the build, and then see if their heading looks right. CloudCannon’s visual editing has helped close that gap for years, and our upgraded Editable Regions improve the experience further.

What editable regions can do for your workflow Direct link to this section

Editable Regions transform CloudCannon’s Visual Editor from a preview tool into a proper editing environment. When an editor is looking at their site in CloudCannon, yellow boxes appear around editable content — click into them, and they’re editing directly on the page. No context-switching between content files, sidebars, and the rendered output. No mental translation from code to design.

For developers, implementing Editable Regions is straightforward, provided that your content and layouts are sufficiently separated. Add a couple of HTML attributes to any DOM element in your templates, or insert a web component, and that content becomes visually editable. Here’s what it looks like in practice:

<h1 data-editable="text" data-prop="title">{title}</h1>

Those two attributes — data-editable and data-prop — turn a page title into something your content team can edit directly in CloudCannon’s Visual Editor. You can make entire collections of content files visually editable within minutes.

Five types of Editable Regions Direct link to this section

CloudCannon supports five distinct types of Editable Regions, each designed for specific content needs:

Text Editable Regions let your team edit text values from front matter, content, or HTML with either plain text or rich text formatting. If you’re working with headings, paragraphs, or any text-based content, this is your primary tool.

Image Editable Regions handle everything image-related. Upload from local storage, select from your repository or DAM, and manage image metadata like alt text and titles — all without leaving the Visual Editor.

Source Editable Regions give you direct access to edit rich text stored as HTML, providing more control when you need to work with formatted content at the markup level.

Array Editable Regions let you manipulate array values stored in front matter. Add items, remove them, reorder them — perfect for buttons, lists, galleries, or any repeating content structure generated by your templating.

Component Editable Regions allow you to work with more complex, modular content structures, giving you the flexibility to edit component-based architectures visually.

Why this matters for your team Direct link to this section

The benefit here isn’t just convenience — it’s about reducing friction in your content workflow. When your content team can see their changes in context immediately, they make better decisions. They catch layout issues before they go live. They understand how their content actually works within your design system.

For developers, Editable Regions mean faster initial setup time, and fewer “can you just change this heading?” requests. Set up your templates once with the appropriate data attributes, and your content team has direct access to everything they need.

CloudCannon’s approach to visual editing respects the structure of your static site while making it accessible to non-technical team members. You’re not compromising on your build process or code quality — you’re simply making the editing experience match the sophistication of your output.

Setting up Editable Regions Direct link to this section

Setting up Editable Regions is straightforward once you understand the basic patterns to follow. The video below demonstrates how to add the necessary HTML attributes to your templates, starting with a simple text region and progressing through more complex scenarios. You'll see how to make headings, paragraphs, images, and arrays editable, and watch those yellow editing boxes appear in CloudCannon's Visual Editor as each region is configured. By the end, you'll have a clear sense of how to transform your static site templates into a fully visual editing experience.

Our documentation includes a complete setup guide for visual editing, along with reference documentation covering all available HTML attributes for configuration.