Modules BETA

Table of contents

Code editor details

The new code editor contains separate sections for HTML+HUBL, CSS, and JS when you are editing a blog or page module. If you are working with an email module, you will only see the HTML+HUBL section of the editor. This distinction between module types is due to the treatment of CSS and JS in the rendered page as detailed below.

What follows is an outline of usage and restrictions for each section of the editor as well as info on how each of these sections handles your code. Please also check out the critical known issues and restricted HubL sections of the reference page for details on code that is incompatible with the new module framework.

Editor sections

HubSpot Help article screenshot
  • CSS and JS are minified and included in the head and foot of the doc respectively.
  • Module CSS and JS are only included once in a document, even if a module is used multiple times on a page.
  • JS is wrapped in a closure for namespacing.
  • The CSS and JS sections of the editor will not accept HubL tokens (with the exception of the module_asset_url function which is documented here). If you need to pass field data or other CMS data to the CSS and JS of a module, you have a couple of options:
    • Use appropriate HTML attributes such as data or class to output HubL into your markup.
    • Use inline style if necessary.
    • Add CSS or JS in the HTML + HUBL section. It is highly recommended that you wrap this code in require_css and require_js tags respectively. Note: since JS in the JS section of the editor is automatically wrapped in a closure, it will be in a separate namespace from JS in the HTML + HUBL section.