Editing interfaces

An overview of the editing interfaces available on CloudCannon.

Lessons in this Tutorial

Eleventy CMS — Get Started With CloudCannon

There are four ways to manage content on CloudCannon: the Visual Editor, Content Editor, Data Editor, and the Source Editor. Each editing interface is useful in different situations.

The Visual Editor

The Visual Editor is the most intuitive way to edit content on CloudCannon. Editable elements are indicated with a yellow box. Editors can click on the element and add their new content, directly on the page.

The Visual Editor also features a sidebar for managing front matter content. You can customize these inputs to give your editing team a more intuitive interface. For example, showing a date picker for a date field, adding a small comment to indicate how a field is used, or using a select box to reference other pages on the site or data in a data file.

We’ll go deeper into how to configure CloudCannon later in this guide, or if you want to skip ahead, read through the documentation on Customizing your inputs.

Content Editor

The Content Editor is a rich text editor for Markdown files. It’s useful if you want a distraction-free, clean writing interface. It’s particularly useful for blog posts and other content with a simple layout. Note that the Content Editor view also shows the Data Editor in the left-hand panel, as pictured below.

Data Editor

We’ve already seen the Data Editor — it’s the side bar for managing front matter in the Visual and Content Editor. The Data Editor is also used to manage content in YAML, TOML, JSON, CSV, and TSV files.

Source Editor

The Source Editor is an in-browser code editor which is great for make small, quick changes. As with all the Editors, any changes sync back to your Git repository.