Detecting when your site is loaded in the Visual Editor

Working with a specific static site generator?
Customize CloudCannon's documentation to suit your SSG.

Astro

Bridgetown

Docusaurus

Eleventy

Gatsby

Hugo

Jekyll

Lume

MkDocs

Next.js

Nuxt

Static

SvelteKit

Custom

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.');
}