Detecting the CMS

In some cases, it may be helpful for your site to know when it’s being rendered in the CMS. The following tips can be used for various reasons to change the behavior of your site when viewed in the CMS.

HTML Comments

If you’re using JavaScript plugins that change the HTML after your page loads, you’ll probably want to disable them in the CMS so those changes don’t get published. One way to do this is with HTML comments.

Surreal will ignore everything inside of these special comments:

<script>alert('This will alert on the site but not in the CMS');</script>


For more control over your scripts, you can check the value of window.isCMS. It will be set to true when the page is rendered in the Live Editor.

if( window.isCMS ) {
    alert('Page is being rendered in the CMS');
} else {
    alert('Page is NOT being rendered in the CMS');

Using meta tags

Alternatively, you can check for the presence of the is-cms meta tag:

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

To check using jQuery, you can do this:

if( $('meta[name=is-cms]').length ) {
    // Your page is being viewed in the CMS
} else {
    // Your page is not being viewed in the CMS

Using CSS

Surreal adds a special class to the <html> element of your page when viewed in the Live Editor. You can use this class for CMS-specific styles. This is useful for many applications, such as forcing hidden elements to show in the CMS so users can edit them.

Here’s an example of how it works. The CSS should be placed directly in your stylesheet:

.is-cms body {
    background: red;

This will turn the page’s <body> red, but it will only be visible in the CMS. The page will still render normally on the live site.