hubspot cms (hubl) code formatter & beautifier
hubl is a jinja2-based template language for hubspot cms. uses {% %} tags, {{ }} expressions, and {# #} comments. also formats plain html and css from hubspot modules.
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.
codefmt is a purpose-built hubl code formatter, designed from scratch to handle the full hubl spec. generic html or jinja2 formatters tend to 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 also auto-detects plain html and css. paste a hubspot module's module.html or module.css and it formats them automatically.
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 %}. it 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 templates, module html, or module css 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 tag splitting and indentation (inline html tags are separated onto their own lines and properly nested), 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.
can I format plain html or css from hubspot modules?
yes. the formatter auto-detects whether your code is hubl, html, or css. if you paste plain html (like a module.html file without hubl tags) or css (like module.css), codefmt automatically formats it using biome, a high-performance code formatter. hubl templates with embedded html are formatted by the hubl formatter, which splits inline html tags onto separate lines and indents them based on nesting.
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.
also format code for zapier, n8n, pipedream, make, hubspot ops hub
other tools: json formatter, python formatter, snippets