the dedicated hubl linter for hubspot cms
HubL is HubSpot's jinja2-based template language for CMS themes, modules, and emails. codefmt is the only dedicated HubL linter: 28 rules catch bugs before you publish, plus formatting for HubL, HTML, and CSS.
{%if content.title%}
<h1>{{content.title}}</h1>
{%endif%}working in HubSpot? the codefmt Chrome and Firefox extension adds a right-click Fix with codefmt inside the design manager, so you lint and format HubL in place.
why standard linters can't read hubl
Prettier and ESLint are built for JavaScript, CSS, and HTML. HubL mixes {% %} tags, {{ }} expressions, and {# #} comments into markup, and those delimiters either break a standard parser or get skipped. the markup can pass while the template logic underneath goes unchecked.
codefmt parses HubL directly. it understands blocks, filters, globals, and module parameters, so it catches mistakes in the template itself, not just the HTML around it.
what the hubl linter catches
28 rules run on a single template, across:
- unclosed or mismatched
{% %}blocks - unknown filters and globals
- deprecated tags
- malformed module and field parameters
- js-mindset traps:
||instead ofor,&&instead ofand,===instead of==, and JavaScript-style ternaries
several rules ship one-click safe fixes, so the common traps are a click to repair rather than a manual rewrite. See every rule in the reference.
formatting hubl, html, and css
beyond linting, codefmt formats HubL templates, custom modules, and email markup, along with the embedded HTML and CSS. delimiters get consistent spacing, blocks get indented, and the structure stays readable.
format hubl without a local dev setup
most HubL tooling assumes a local project. the official prettier-plugin-hublneeds Prettier wired into your repo, and HubSpot's VS Code extension lints HubL once you have theme files checked out locally. those are built for a different job: editing theme files in your IDE.
codefmt meets you where the markup already is. paste a template into the browser and format or lint it in one pass, or install the browser extension to format and lint HubL right inside HubSpot's design manager with no checkout, no Prettier config, and no account.
lint hubl in your editor or inside hubspot
paste a template into the HubL formatter and linter, or install the browser extension to lint inside HubSpot's design manager with a right-click. see how it compares to studionope's HubL Code Formatter or HubSpot's VS Code extension, or read the guide to formatting HubL.
frequently asked questions
why can't Prettier or ESLint lint HubL?
Prettier and ESLint parse JavaScript, CSS, and HTML. HubL is a jinja2-based template language: {% %} tags, {{ }} expressions, and {# #} comments embedded in markup. standard tools either error on those delimiters or skip them, so HubL-specific mistakes go uncaught. codefmt parses HubL directly, so it lints the template logic, not just the surrounding HTML.
what does the HubL linter check?
28 rules across unclosed or mismatched {% %} blocks, unknown filters and globals, deprecated tags, malformed module and field parameters, and js-mindset traps (|| instead of or, && instead of and, === instead of ==, and JavaScript-style ternaries). several rules ship one-click safe fixes.
is the HubL linter free?
yes. it runs in your browser at no cost, with no account and no sign-up. paste a template into the HubL formatter, or install the browser extension to lint inside HubSpot's design manager.
does it work on HubSpot modules and email templates?
yes. it lints and formats HubL in CMS templates, custom modules, and email markup, along with the HTML and CSS those files contain.
how is this different from the HubSpot CLI?
the HubSpot CLI uploads and fetches theme files; it does not lint HubL for the mistakes codefmt catches. the two are built for different jobs: use the CLI to sync files, and codefmt to catch template bugs before you publish.
can I format HubL without setting up VS Code and Prettier?
yes. the official prettier-plugin-hubl and HubSpot's VS Code extension both assume a local project with theme files checked out. codefmt runs in the browser: paste a template to format and lint it, or use the extension to do it inside HubSpot's design manager, with no local setup, no Prettier config, and no account.
how does this compare to HubSpot's VS Code extension for HubL?
HubSpot's VS Code extension lints HubL inline while you edit theme files locally in your IDE. codefmt is built for a different moment: formatting and linting HubL in the browser or directly inside the HubSpot design manager, without a local dev environment. use the VS Code extension for local theme development, and codefmt to catch template bugs and clean up markup wherever you are.
use the tool: HubL formatter and linter
other tools: json formatter, python formatter, snippets