HubL (pronounced “Hubble”) is the markup language used in HubSpot's content management system (CMS). It is a templating system based on Jinja but much of the markup is unique to HubSpot and does not support all the features of Jinja.

PLEASE NOTE: Contents of this page are not original. All information is taken from the HubSpot CMS documentation and paraphrased. This page was created solely for the purpose of designing a technical documentation page and NOT meant to be a source of truth in any way.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Modules are resuable components that can be added to both pages and templates and customised by the end user in the content editor. Developers can create their own modules and add modules to coded tempalte files using HubL tags.

Module tags consists of the following components:

• Type of module ― specifies which module to render. Refer to this page to view the different types of modules available
• Unique name of module ― unique identity for the module in the context of the template
• Path (depends on tag) ― defines the location of where the module is in the design manager. The path for HubSpot default modules should always start with @hubspot/ followed by the type of module
• Parameters (optional) - specify additional module information

Example module:

    
  {% module "unique_module_name",
     path="@hubspot/text",
     label="Single Text Line",
     value="This is a single text line"   
  %}
				

HubL syntax can be used to store variables and output them to templates. They are either a single word in an expression or an attribute of a dictionary.

Variables are delimited by }} and have the basic syntax:

  {{ variable }}
  {{ dict.attribute }}  
        

HubSpot has a list of predefined variables you can used in your page, blog and email tempaltes, but you can also define your own variables.

  {% set string_var = "This is a string value stored in a variable" %}
  {{ string_var}}

  {% set bool_var = True %}    
  {{ bool_var}}

  {% set int_var = 53 %}
  {{ int_var}}

  {% set seq_var = ['Item 1', 'Item 2', 'Item 3'] %}    
  {{ seq_var}}

  {% set var_one = "String 1" %}
  {% set var_two = "String 2" %}
  {% set sequence = [var_one,  var_two] %}
  {{ sequence }}

  {% set dict_var = {'name': 'Item Name', 'price': '$20', 'size':'XL'} %}  
  {{ dict_var.price }}
				 

NOTE: Variables should either be single words or use undescores for spaces. HubL does not support hyphenated variable names.

HubL macros allow you to print multiple statements with a dynamic value. This technique proves useful when you find yourself writing the same basic code blocks over and over, but only need to change certain values.

The macro is defined, named, and given arguments within a HubL statement. The macro is then called in a statement that passes its dynamic values, which prints the final code block with the dynamic arguments.

    
  {% macro name_of_macro(argument_name, argument_name2)  %}
     {{ argument_name }}
     {{ argument_name2 }}
  {% endmacro %}
  {{ name_of_macro('value to pass to argument 1', 'value to pass to argument 2')  }}    
				

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

• Lorem ipsum dolor sit amet, consectetur adipiscing elit
• Praesent molestie erat vitae dignissim tincidunt
• Cras sodales nibh luctus nisi sodales, sed placerat nulla consectetur
• Aliquam tincidunt urna eget ex congue congue

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.