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, I like to add a clickable element to my "background chooser" module or on my "vertical spacer" module (spacing users can add between modules at the page level). In the image below, the purple icons are only visible in the editor and not on the actual page: 

You can achieve this using HubL or CSS (or both options, for good measure!).

Hide content in the HubSpot content editor using HubL

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

And anything within the "Your HTML here" 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: 

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).