Detecting when your site is loaded in the Visual Editor

Last modified: November 22nd, 2023

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.

There may be situations where you want to show content to editors when they’re in the Visual Editor but not show it on the live site.

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.inEditorMode with JavaScript to find out if a page is being viewed inside the Visual Editor:

if (window.inEditorMode) {
  alert('Inside CloudCannon!');
} else {
  alert('Not in CloudCannon.');
Open in a new tab