Wat is HubL? Complete uitleg (met voorbeelden) voor HubSpot CMS in 2026

door | jan 13, 2026

Home / HubSpot / Wat is HubL

HubSpot kent veel mogelijkheden. Veel van deze zijn niet lastig te realiseren. Dat komt omdat het met een drag and drop editor gedaan kan worden. Toch kun je als ontwikkelaar met HubL, de templating language, veel zelf ontwikkelen.

HubL is dus zoals gezegd een templating language. Goed om te weten dat het geen programmeertaal is. Al lijkt het daar soms wel op. Maar wat is het dan precies?

Wat is HubL?

HubL (HubSpot Markup Language) is een templating language die uitsluitend werkt binnen het HubSpot-ecosysteem. Het kun je zien als een uitbreiding op HTML, waarmee je dynamische content kunt tonen op basis van data uit HubSpot.

In tegenstelling tot een programmeertaal (zoals JavaScript of PHP) kun je met HubL geen complexe logica of berekeningen uitvoeren. Wat je wél kunt doen, is data ophalen, voorwaarden instellen en content herhalen. Denk hierbij aan:

  • Het tonen van content op basis van pagina-eigenschappen
  • Het dynamisch vullen van teksten, afbeeldingen of links
  • Het herhalen van elementen zoals kaarten, testimonials of blogitems

HubL draait volledig server-side. Dat betekent dat de logica al wordt uitgevoerd voordat de pagina in de browser van de bezoeker terechtkomt. Dit maakt HubL veilig en performant, maar ook beperkt in vergelijking met echte programmeertalen.

Wanneer gebruik je HubL?

Niet elk bedrijf zal een maatwerk website nodig hebben. Neem bijvoorbeeld een zzp’er die een portfolio wil hebben. Voor deze ondernemers is maatwerk niet nodig. Er zijn meerdere scenario’s te bedenken wanneer een maatwerk HubSpot website wel nodig is. Op dat moment kan je niet om HubL heen.

Het ontwikkelen van een HubSpot website gebeurt, in tegenstelling tot andere websites, op basis van modules.

Even praktisch. Laten we een knop bouwen

Om een impressie te geven van hoe HubL werkt, ga ik laten zien hoe je een simpele knop bouwt. Dit doe je samen met HTML en CSS (eventueel JavaScript). De dynamische en website parameters worden geladen met HubL.

De opbouw van een HubL module Een module bestaat in de basis uit drie onderdelen die samenwerken: de velden (de input, binnen HubSpot design manager geregeld), de HubL/HTML (de structuur) en de CSS/JavaScript (het uiterlijk en acties).

De HubL & HTML (De structuur)

In dit voorbeeld gaan we ervan uit dat we twee velden hebben aangemaakt in de module-interface: button_text (een tekstveld) en button_link (een linkveld).

{# De HubL logica om de link en tekst op te halen #}
<div class="custom-button-container">
<a href="{{ module.button_link.url.href }}" class="my-custom-button"

{% if module.button_link.open_in_new_tab %}target="_blank"{% endif %}

{% if module.button_link.no_follow %}rel="nofollow"{% endif %}>

{# Hier tonen we de tekst uit het veld, met een fallback #}
{{ module.button_text || "Klik hier" }}

De CSS (De styling)

Om de knop er goed uit te laten zien, voegen we wat eenvoudige styling toe. Het mooie is dat je met HubL zelfs kleuren uit de HubSpot-instellingen kunt ophalen, maar voor nu houden we het simpel:

.custom-button-container { padding: 10px 0; }

.my-custom-button
{ background-color: #ff7a59; /* De bekende HubSpot oranje kleur */
color: #ffffff; padding: 12px 24px; border-radius: 5px; text-decoration: none; display: inline-block; transition: background-color 0.3s ease; }

.my-custom-button:hover { background-color: #eb5a31; }

Wat gebeurt hier nu precies?

Je ziet in de code de dubbele accolades staan: {{ … }}. Dit is de kern van HubL.

Variabelen: Met module.button_text vertel je HubSpot: “Kijk in de instellingen (Design manager) van deze specifieke module en haal de tekst op die de gebruiker daar heeft ingevuld.”

Statements: Met de {% if … %} tag kun je logica toevoegen. In dit voorbeeld controleren we of de gebruiker heeft aangevinkt dat de link in een nieuw tabblad moet openen. Is dat het geval? Dan voegt HubL automatisch target=”_blank” toe aan de HTML-code.

Waarom dit zo krachtig is

Door HubL op deze manier te gebruiken, creëer je een herbruikbaar component. Je hoeft de knop maar één keer te programmeren. De marketeer kan deze vervolgens honderden keren op de website slepen en per keer bepalen waar de knop naartoe linkt en welke tekst erin staat, zonder dat jij als developer telkens opnieuw aan de slag moet.

Zo combineer je het beste van twee werelden: de volledige creatieve vrijheid van code en het gebruiksgemak van drag-and-drop.