← All extensions

HubL

v1.0.0 · by Blue Amber · added 3 November 2026

HubL syntax highlighting for HubSpot templates

Languages
Install in Forge SuperView the source

How to install

With Forge Super installed, the button above opens the app on this extension, where you press Install. Nothing is installed until you do.

You can also open the Extensions panel in the app and search for HubL. The extension's id is hubl.

Don't have Forge Super yet? Download it here.

README

From the extension's repository, written by its authors and not by Mentenaz. See the source.

HubL Language Support for Zed

Syntax highlighting for HubL (HubSpot's templating language) in Zed editor.

Features

  • Tree-sitter based syntax highlighting for HubL templates
  • Support for pure HubL files (.hubl)
  • Support for HTML + HubL files (with HTML injection)
  • Support for CSS + HubL files (with CSS injection)
  • Highlighting for:
    • HubL tags: {% ... %}
    • HubL variables: {{ ... }}
    • HubL comments: {# ... #}
    • Keywords: if, for, block, macro, set, etc.
    • Filters (|upper, |truncate, etc.)
    • Property access (.name, .title, etc.)
    • Operators and literals
    • Whitespace trimming syntax ({%-, -%}, {{-, -}})

Installation

From Zed Extensions

  1. Open Zed
  2. Open the command palette (Cmd+Shift+P / Ctrl+Shift+P)
  3. Search for "zed: extensions"
  4. Search for "HubL" and install

Dev Extension (Local)

  1. Clone this repository
  2. In Zed, open the command palette
  3. Type "zed: install dev extension"
  4. Select the cloned directory

Usage

Automatic file detection

  • .hubl files are automatically detected as HubL
  • .hubl.html files are detected as HTML + HubL
  • .hubl.css files are detected as CSS + HubL

Using with regular .html and .css files

Since Zed's built-in HTML and CSS extensions claim .html and .css files, you need to configure file type overrides in your Zed settings to use HubL highlighting for those files.

Add this to your Zed settings (~/.config/zed/settings.json):

{
  "file_types": {
    "HTML + HubL": ["*.html"],
    "CSS + HubL": ["*.css"]
  }
}

For project-specific configuration (e.g., only HubSpot template directories), you can use glob patterns:

{
  "file_types": {
    "HTML + HubL": ["**/templates/*.html"],
    "CSS + HubL": ["**/templates/*.css"]
  }
}

You can also manually select the language by clicking the language name in the bottom-right status bar.

Grammar

This extension uses tree-sitter-hubl, a tree-sitter grammar for HubL.