hubspot cms (hubl) code formatter

hubl is a jinja2-based template language for hubspot cms. uses {% %} tags, {{ }} expressions, and {# #} comments.

hubl (hubspot markup language) is the jinja2-based templating language that powers every page, email, blog post, and module in hubspot cms. it uses {% if %} for control flow, {{ variable }} for expressions, {# comments #} for comments, and hubspot-specific tags like {% dnd_area %}, {% module %}, and {% macro %} for building dynamic hubspot content.

despite hubl being used by thousands of hubspot developers, there has never been a dedicated hubl formatter available online — until now. codefmt is a purpose-built hubl code formatter — built from scratch to handle the full hubl spec. generic html or jinja2 formatters break hubl templates because they don't understand hubspot-specific tags like dnd_area, dnd_section, dnd_module, or the way hubl blocks nest inside html. codefmt was built from scratch to handle the full hubl spec.

the formatter normalizes delimiter spacing (consistent gaps inside {% %} and {{ }}), isolates block-level tags onto their own lines, applies correct indentation based on hubl block nesting, collapses short single-line blocks, inserts blank lines between top-level blocks for readability, preserves whitespace control markers ({%- and -%}), and normalizes quotes. content inside {% raw %} blocks is preserved exactly as-is.

codefmt also includes hubl linting to catch errors before they break your templates. the linter detects unclosed blocks — like a {% for %} missing its {% endfor %} — flags mismatched opening and closing tags, and warns about deprecated tags such as widget_block that should be migrated to dnd_area. formatting and linting run together, so you get clean code and error detection in a single step.

whether you're building drag-and-drop page templates with dnd_area and dnd_section, writing reusable macros, pulling data from hubdb tables, creating custom modules, building blog listing templates, or designing email templates — codefmt handles it all. paste your hubl code above and get perfectly formatted, linted output instantly.

frequently asked questions

what is hubl?

hubl (hubspot markup language) is a jinja2-based templating language used in hubspot cms for building website pages, blog templates, email templates, landing pages, and custom modules. it extends jinja2 with hubspot-specific tags like dnd_area, dnd_section, dnd_module, and functions for accessing hubdb, blog content, and crm data.

does codefmt support hubl linting?

yes — codefmt now includes hubl linting that catches common errors before they break your templates. the linter detects unclosed blocks (like a for loop missing endfor), mismatched opening and closing tags, and deprecated tags such as widget_block (which should be migrated to dnd_area). this runs alongside formatting so you get clean code and error detection in one step.

what does the hubl formatter handle?

the formatter handles delimiter normalization (consistent spacing inside {% %} and {{ }}), block-level tag indentation, html indentation within hubl blocks, single-line block collapse for short expressions, blank line insertion between top-level blocks, whitespace control marker preservation ({%- and -%}), and quote normalization across your template.

what filters are available in hubl?

hubl supports standard jinja2 filters like |title, |lower, |upper, |truncatewords, plus hubspot-specific filters like |datetimeformat, |currency, |pprint, |selectattr, and |rejectattr. the formatter preserves all filter expressions and their chaining while normalizing the surrounding whitespace.

how does the formatter handle dnd tags and modules?

dnd_area, dnd_section, dnd_column, dnd_row, and dnd_module tags are treated as block-level elements and properly indented with their nested content. the formatter understands the drag-and-drop hierarchy and ensures each level is correctly indented, making complex dnd layouts much easier to read and maintain.

does the formatter work with hubl macros and raw blocks?

yes. macro definitions and their contents are properly indented as block-level structures, including any nested control flow inside them. content inside {% raw %} blocks is preserved exactly as-is — the formatter will not modify anything between raw and endraw tags, which is important for javascript snippets embedded in templates.

how does the formatter handle whitespace control markers like {%- and -%}?

the formatter fully supports hubl whitespace control markers. tags using {%- -%} or {{- -}} syntax are recognized and preserved during formatting. delimiter normalization still applies inside the markers, so you get consistent spacing while retaining your whitespace trimming behavior.

can i format hubspot email templates and blog templates?

absolutely. the formatter works with all hubspot template types including email templates, blog listing and post templates, landing pages, website pages, and system templates. it correctly handles email-specific tags, blog-related loops and variables, required_email_template markers, and subscription preference tags.