Skip to content
Home button
  • Pricing
Articles
Choose your preferred SSG:
Choose your preferred SSG:

Introduction to Visual Editing

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: 

Was this article helpful? or Suggest an improvement >