CloudCannon Documentation

The Visual Editor is the main way to edit content in CloudCannon. Editable Regions have yellow borders. To make an update, click inside a yellow box and edit the content inline. Navigate to other pages by clicking links on the site.

The Page Selector shows a list of pages, posts, drafts and collection items to navigate to. Use the Toggle Pages button in the top right corner to access it.

Visual Editor


Editor Content

Create content that only appears in the Visual Editor with CSS or JavaScript.

The Visual Editor adds the .cms-editor-active class to the body of the page. Use this to show elements that are hidden on the live site:

.editor-content {
  display: none;
}

.cms-editor-active .editor-content {
  display: block;
}

Alternatively, check window.location.host with JavaScript to find out if a page is being viewed inside the Visual Editor:

if (window.location.host === "app.cloudcannon.com") {
  alert("Inside CloudCannon!");
} else {
  alert("Not in CloudCannon.");
}