Add content that will only appear in the HubSpot editor

Sometimes you may want to add content that will only appear in the HubSpot blog or page editor. 

For example, a note to the content editor explaining how a particular module is used. You can do this using HubL (recommended) or CSS.

Hide content in the HubSpot content editor using HubL

You can use the is_in_page_editor request variable to detect whether you are in the content editor. Your code would therefore look like this:

{% if is_in_page_editor %}
  <div class="editor-note">
    <p>This content will only appear in the page editor.</p>
  </div>
{% endif %}

And anything within the editor-only container will only appear to users when editing a HubSpot page and not in the preview or live page.

Hide content in the HubSpot content editor using CSS

To do this, I take advantage of the fact that the editor has a CSS body class called hs-inline-edit. Therefore, I can create a class that is hidden everywhere else but appears on pages that have that body class (the editor).

So I can add something like the following to my CSS:

.editor-only {
  display: none;
}
.hs-inline-edit .editor-only {
  display: block;
}

An element with the class editor-only will always be hidden (the display is "none"), except in the editor (the display is "block" when it's on pages with the class hs-inline-edit).