codefmt vs. HubL Code Formatter
Two tools for formatting HubL templates in HubSpot CMS. The HubL Code Formatter by studionope.com is a paid Chrome extension that integrates with HubSpot's in-app design manager editor. codefmt is a free web tool with a free Chrome and Firefox extension that adds a context-menu format and fix action, plus HubL linting. They overlap on HubL formatting and differ on price, browser support, in-editor integration, and lint coverage.
tl;dr
pick codefmt if: you want a free option, you use Firefox, you want HubL linting (unclosed blocks, deprecated tags) alongside formatting, or you also format JavaScript, Python, or other automation-platform code.
pick HubL Code Formatter (studionope) if: you want a Chrome extension that runs directly inside the HubSpot design-manager editor with no copy-paste, and you are happy to pay an annual subscription for that integration.
what each one is
codefmt: a free web formatter and linter at codefmt.dev for HubL, HTML, CSS, JavaScript, and Python, used by HubSpot developers and automation builders. The HubL formatter normalizes delimiter spacing, indents block-level tags, splits inline HTML, preserves whitespace control markers and raw blocks, and supports dnd_area, dnd_section, macros, and HubDB. A free Chrome and Firefox extension adds a Fix with codefmt context-menu action that formats selected code in place across HubSpot, Zapier, n8n, Pipedream, and Make.
HubL Code Formatter (studionope): a paid Chrome extension at €19.99 per year (Chrome Web Store ID libbhiboheichaipllbbnohofmankdck) by studionope.com that adds in-page formatting to the HubSpot design manager. It focuses on HubL templates and runs directly inside the HubSpot editor surface.
side by side
| feature | codefmt | HubL Code Formatter (studionope) |
|---|---|---|
| price | free | €19.99 per year |
| delivery | web app at codefmt.dev plus optional browser extension | Chrome extension |
| browsers supported | any browser for the web app; Chrome and Firefox for the extension | Chrome |
| HubL formatting | yes | yes |
| HubL linting | yes, detects unclosed blocks, mismatched tags, and deprecated tags | not advertised |
| HTML and CSS auto-detection | yes, formats module.html and module.css automatically | not advertised |
| in-HubSpot-editor integration | via the codefmt extension context menu | yes, integrated with the design manager |
| also formats | JavaScript (Biome), Python (Ruff), JSON, plus Zapier, n8n, Pipedream, Make code | HubL focus |
| account required | no | subscription required |
frequently asked questions
are these two tools doing the same thing?
They overlap on the core job of formatting HubL templates, and they differ on everything around it. The studionope.com extension runs inside the HubSpot design manager so you do not have to copy and paste. codefmt is a free web tool plus a free browser extension; the codefmt extension adds a Fix with codefmt context menu that formats selected text on most pages, including HubSpot. codefmt also covers HubL linting and other languages.
is codefmt's HubL formatter compatible with prettier-plugin-hubl?
They both target the HubL templating language but they are separate implementations. prettier-plugin-hubl is a community Prettier plugin intended for IDE and CLI use. codefmt's HubL formatter is in-house, runs in the browser via WebAssembly, and focuses on a consistent output for HubSpot CMS templates (dnd_area, dnd_section, macros, HubDB, whitespace control markers, raw blocks). If you already use prettier-plugin-hubl in your editor, you can keep using it; codefmt is a web option that does not require a local setup.
does HubSpot include a built-in HubL formatter?
The HubSpot design manager editor has syntax highlighting and basic editor features. For formatting HubL templates you either install an in-editor extension (such as the studionope.com one), use the HubSpot CMS VS Code extension with a HubL-aware Prettier plugin locally, or paste templates into a web formatter like codefmt. There is no official one-click HubL beautifier built into the HubSpot app today.
HubL formatter, HubL beautifier, which term is right?
Both refer to the same job: reformatting a HubL template for readability while preserving behavior. codefmt uses formatter in product copy because it also performs structural checks (block balance, deprecated tag detection) that are closer to linting than to pure cosmetic beautification. The HubL Code Formatter extension uses formatter in its name too.
does codefmt store my HubL templates?
The codefmt web app formats HubL in the browser using WebAssembly; the template never leaves your machine for formatting. The format API can be used server-side for automation, in which case the request and response are processed in memory and not persisted. There are no accounts and no tracking cookies on codefmt.dev.
best HubL formatter or beautifier?
There are two HubL-specific external formatters in active use: the studionope.com HubL Code Formatter (paid Chrome extension that runs inside the HubSpot editor) and codefmt (free web tool and free Chrome and Firefox extension with HubL linting). prettier-plugin-hubl exists as an IDE-targeted Prettier plugin. Pick the one that matches your workflow: in-editor integration, free web, or IDE plugin.
also format code for HubL, HubSpot
related comparisons: codefmt vs. Prettier Playground, codefmt vs. Zapier's built-in Formatter