Detecting the CMS

The following techniques can be used to detect when a page is being rendered in the CMS. This lets you change the behavior of pages in the editor using HTML, CSS, and JavaScript.

HTML

Special HTML comments can be used to tell the editor to ignore them. They use the following syntax.

<!--cms-ignore-->
  ...
<!--/cms-ignore-->

When a page is rendered in the editor, everything inside of these special comments will be removed, so don't use them inside content regions or static includes.

One popular use for special comments is to prevent scripts from running.

<!--cms-ignore-->
<script>
  console.log('This will run on the website, but not in the editor.');
</script>
<!--/cms-ignore-->

Notice

Previous versions of Surreal CMS used cms-disable instead of cms-ignore for special comments. The old syntax has been deprecated but is still supported for backwards compatibility purposes.

CSS

When editing a page, we add the is-cms class to the <html> element. You can use this to target the CMS in your stylesheet.

Here's a contrived example that adds a red border to every <div>, but only in the editor.

.is-cms div {
  border: dashed 2px tomato;
}

JavaScript

For more control over your scripts, you can test the value of window.isCMS. It will be true when the page is rendered in the CMS.

if (window.isCMS) {
  console.log('This is the CMS.');
} else {
  console.log('This is not the CMS.');
}

Meta Tags

When a page is rendered in the CMS, it will also include the following meta element.

<meta name="is-cms" content="true">

You can check for this meta tag using JavaScript.

if (document.querySelector('meta[name="is-cms"]')) {
  // This is the CMS
} else {
  // This is not the CMS
}