HubL Code Formatter

About

HubL Code Formatter cleans up messy code in HubSpot Design Manager with a single keyboard shortcut.

WHAT IT DOES
- Select your code, press Shift+Tab, and get perfectly formatted HubL, HTML, CSS, or JavaScript. No copy-pasting into external tools. No manual fixes.
- Rainbow indentation adds color-coded guides to nested code, making complex DND structures and deeply nested templates easier to read.
  - Tag matching highlights the corresponding opening or closing tag when you click on any HubL block or HTML element. Works with if/endif, for/endfor, dnd_area/end_dnd_area, div, section — everything.

FEATURES
- Format HubL, HTML, CSS, and JavaScript
- Rainbow indentation guides
- Tag matching for all HubL blocks and HTML tags
- Customizable indent width (2-8 spaces)
- Adjustable max line length
- Smart spacing for DND modules
- Multiple keyboard shortcut options

HOW TO USE
1. Open a file in HubSpot Design Manager
2. Select the code you want to format
3. Press Shift+Tab (or Cmd+Shift+F / Ctrl+Shift+F)

REQUIREMENTS
License key required. Delivered via email immediately after purchase. One license works on one device at a time — you can transfer it anytime through settings.

SUPPORT
Email [email protected] with any questions.

Built by StudioNope.