Detect the Visual Editor

Your website can detect whether it is loaded in a visitor's internet browser or in CloudCannon's Visual Editor, allowing you to show or hide content, load scripts, and run custom integrations in the Visual Editor only.

There are two ways to detect the Visual Editor, and they become available at different points in your page's lifecycle:

• JavaScript flag — window.inEditorMode is set before any of your own scripts run, so you can use it to decide whether to load code at all. Use this method to register components for Component Editable Regions, or to initialize the Visual Editor API.
• CSS class — .cms-editor-active is added to your page's <body> element once the Visual Editor has loaded your page. Use this method to show or hide elements that are already on the page, without writing any JavaScript.

You can use either method, or both. The CSS class only governs elements that are already on the page.

This article assumes you have a CloudCannon Site that has built successfully, so you can open a page in the Visual Editor. For more information, please read our documentation on what Visual Editing is.

JavaScript flag#

When you open a file in the Visual Editor, CloudCannon adds a script to the top of your page's <head> that sets window.inEditorMode to true, then loads the page into a sandboxed iframe. The flag is available before your own scripts run, and is undefined everywhere else, including on your live Site and in local development.

To run code only in the Visual Editor with a JavaScript flag:

1. Open your website files in your local development environment.
2. Add the following if guard around the code that should only run in the Visual Editor.

if (window.inEditorMode) {
  // Your Visual Editor code here
}

CloudCannon will run the guarded code when it opens your page in the Visual Editor, and skip it on your live website.

The example above checks the flag inside a script your visitors already download. Because the flag is set before your own scripts run, you can also put the check around an import(), so an entire script only loads in the Visual Editor and never runs for your website visitors. You load the component registration script for Component Editable Regions this way, since it has no job on your live page. For more information, please read our documentation on configuring Component Editable Regions.

CloudCannon also provides a Visual Editor API, a JavaScript interface designed for experienced CloudCannon developers to read and write content, listen for changes, and build custom integrations. The window.inEditorMode flag does not tell you whether this API is available yet: CloudCannon assigns it to window.CloudCannonAPI after your page has loaded, so a script that runs earlier will find it undefined. A cloudcannon:load event fires on document once the API is ready. For a pattern that works whether or not the API has loaded, please read our documentation on initializing the Visual Editor API.

CSS class#

CloudCannon adds the .cms-editor-active class to the <body> element of your page once the Visual Editor has loaded it, and adds it nowhere else. You can use this class to show or hide elements with CSS, without any JavaScript, by combining it with another CSS class.

This method needs a class name of your own, applied to the elements you want to show only in the Visual Editor. The example below uses .example-class.

To use a CSS class to conditionally show elements in the Visual Editor:

1. Open your website files in your local development environment.
2. Add your class name to the HTML elements you want hidden on the live Site but visible in the Visual Editor.
3. Copy the following rules into your CSS file.

.example-class {
  display: none;
}

.cms-editor-active .example-class {
  display: block;
}

CloudCannon will show elements with that class in the Visual Editor once your page has loaded, and keep them hidden on your live Site.

Because CloudCannon adds the class after your page loads, the elements it governs must already be on the page. To decide whether a script loads in the first place, use the JavaScript flag instead.

Detecting the Visual Editor in a template#

Both methods above run in your page, so they cannot change what your templates output when CloudCannon re-renders a Component Editable Region. Some SSGs expose a separate ENV_CLIENT flag for that, which you can use to render an editing fallback for a component that cannot run in CloudCannon's renderer. For more information, please read our documentation on handling components that cannot render in the Visual Editor.