Introducing the Visual Editor

Last modified: January 15th, 2024

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Great! We'll show you documentation relevant to .
You can change this any time using the dropdown in the navigation bar.

Visual Editing empowers your content team to edit on the page itself, and to see results instantly with live previews. Content editors can have clearly defined access to — and control over — their page contents, without needing to worry about anything too technical.

The Visual Editor is one of the main ways to manage content in CloudCannon. It mirrors your site itself, so the site's content is the only thing your editors need to know.

  • Navigate to other pages by clicking links on the site.
  • All of your styles and JavaScript remain intact and functional within the Visual Editor.

Editing markup#

If you have your content stored in HTML or markdown, CloudCannon enables editing that content directly on the page:

  1. Editable regions: add the class of editable to any element to enable a WYSIWIG editor directly on the page.
  2. Markdown in the Visual Editor: edit markdown on the page instead of the Content Editor. Isolate your content tag in one element and edit inline.
Animated GIF showing visual editing inline

Editing data#

Visual editing data is a combination of two features on CloudCannon:

  1. Data previews: receive updates from CloudCannon whenever changes in your data occur. Rerender the page with the new data to give live context updates to your editors. Remove the guess work.
  2. Data binding: inform CloudCannon about which elements on the page correlate to which keys in your data. CloudCannon can then give controls directly on the page. As easy as adding an attribute to your elements. It is recommended both are used in conjunction for the best editing experience.
Animated GIF showing data editing with Editor Panels

Customizing your controls#

You can further configure the controls on your site, giving content editors a personalized workflow for their use case:

Open in a new tab