Editable Regions allow you to edit your content in the Visual Editor.
An Editable Region in the Visual Editor is signified by a yellow box around a piece of content. Clicking into the Editable Region will have a different result depending on the type of content it contains.
In CloudCannon, defining Editable Regions in your files is as simple as adding an HTML attribute to any DOM element or inserting a web component on any file in your website that outputs to an HTML webpage after a Site build. You can make an entire Collection of content files visually editable in minutes.
<h1 data-editable="text" data-prop="title" >{title}</h1>
We have added the data-editable and data-prop HTML attributes to the <h1> tag in our Blog Post layout to create a Text Editable Region around the Title field.
Want to add Editable Regions to your Site? Check out our guide: Set up Visual Editing.
There are five types of Editable Regions:
- Text Editable Regions — Allows you to edit text values stored in front matter, content, or HTML with plain text or rich text formatting options.
- Image Editable Regions — Allows you to upload images from your local storage, select existing images from your repository or DAM, and manage image details like title or alt text.
- Source Editable Regions — Allows you to edit rich text stored in HTML.
- Array Editable Regions — Allows you to add, remove, and reorder array values stored in front matter and generated by HTML-like files with templating.
- Component Editable Regions — Allows you to edit registered Astro or React components.
For a complete list of HTML attributes for configuring Editable Regions, please read our Editable Regions reference documentation.