HubL Code Formatter by StudioNope
Format HubL, HTML, CSS & JavaScript in HubSpot Design Manager with one click. Clean, readable code instantly.
Some features may require paymentSome features may require payment
1 User1 User
Extension Metadata
Screenshots
About this extension
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 hello@studionope.com with any questions.
Built by StudioNope.
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 hello@studionope.com with any questions.
Built by StudioNope.
Rated 0 by 0 reviewers
Permissions and data
Required permissions:
- Access your data for sites in the hubspot.com domain
Optional permissions:
- Access your data for sites in the hubspot.com domain
Data collection:
- The developer says this extension doesn't require data collection.
More information
- Add-on Links
- Version
- 1.0.4
- Size
- 273.3 KB
- Last updated
- 2 months ago (Jan 21, 2026)
- Related Categories
- License
- All Rights Reserved
- Privacy Policy
- Read the privacy policy for this add-on
- Version History
- Add to collection