Configure Source Editable Regions

Last modified: November 5th, 2025

Permissions required

Members of the Owners, Developers, and Technical Editors Default Permission Groups, or Custom Permission Groups with the site:source-editor:write permission, can add Editable Regions to files using the Source Editor in CloudCannon.

Source Editable Regions are one type of Editable Region you can add to your layout and HTML-like files to enable visual editing. Source Editable Regions allow you to edit rich text stored in HTML.

To avoid misconfiguration issues where CloudCannon cannot find the data property you want to edit, always add Editable Regions to values closest to the root of the file first (i.e., work from parent elements towards child elements).

These instructions assume you have configured your build settings and are comfortable editing HTML layouts, either in CloudCannon's Source Editor or your local development environment.

To configure Source Editable Regions in the Visual Editor:

Identify the file you want to which you want to add a Text Editable Regions. We recommend any HTML files that contain templating that is populated by content files at build time.
Open the file in CloudCannon's Source Editor or your local development environment.
Identify the HTML tag that contains your templating and add the HTML attribute data-editable="source" . If no DOM element is available, you can wrap the templating in the <editable-source> web component.
Add the data-path="" HTML attribute to the same DOM element, or to the <editable-source> web component. The value of data-path should be the path the to file you want to edit.
Add the data-key="" HTML attribute to the same DOM element, or to the <editable-source> web component. The value of data-key should be a unique identifier for that section of your file (e.g., main, header, article).
Save the change to your Site. CloudCannon will automatically rebuild your Site.

When you open the file in the Visual Editor, CloudCannon will show a yellow Editable Region box. CloudCannon will also show a WYSIWYG toolbar for formatting your content when you click into text inside the Editable Region and a Snippet for all images inside the region.

A screenshot of the Visual Editor shows yellow Editable Region boxes around the rich text content on the Home webpage.

Do not nest Text or Image Editable Regions inside Source Editable Regions.

Examples#

Here are a few examples of different Text Editable Regions:

index.astro

copied


<!doctype html>
<html lang="en">
	<body>
        <main data-editable="source" data-path="/src/pages/index.astro" data-key="main"> 
            <img src="/smiling-robot.jpg">
			<h1>Hello!</h1>
			<p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo
                viverra. Adipiscing enim eu turpis egestas pretium.
			</p>
			<p>Varius sit amet mattis vulputate enim. Habitasse platea dictumst:</p>
			<ul>
				<li>Morbi tristique senectus et netus.</li>
				<li>Id semper risus in hendrerit gravida rutrum quisque non tellus.</li>
			</ul>
		</main>
	</body>
</html>

The data-editable attribute defines what kind of data this element contains, the data-path attribute defines the path to the file we want to edit, and the data-key attribute defines the unique identifier for this region if there are multiple regions in the file. In this case, we want a Source Editable Region, so the value of data-editable is source, we want to edit the /src/pages/index.astro file, and the unique key is main.

Misconfigured Source Editable Regions#

CloudCannon will display an orange warning box in the Visual Editor if your Source Editable Regions is misconfigured.

Source Editable Regions are misconfigured if:

You did not define the data-path HTML attribute.
You did not define the data-key HTML attribute.
The file path defined by data-path does not exist.
There are Editable Regions with the same data-key value. This value should be unique.