hubl-templating

Generate HubL macros and templates for HubSpot CMS theme development.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/GolfNext/golfnext-tool-kiosk-support-page --skill hubl-templating
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: hubl-templating
Source: https://github.com/GolfNext/golfnext-tool-kiosk-support-page/tree/main/.claude/plugins/hubspot-cms-dev/skills/hubl-templating
Command: npx skills add https://github.com/GolfNext/golfnext-tool-kiosk-support-page --skill hubl-templating

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides comprehensive guidance and patterns for using HubL, HubSpot's server-side templating language, enabling efficient and dynamic website development within the HubSpot CMS.

Core Features & Use Cases

  • HubL Syntax & Logic: Covers expressions, statements, variables, control flow (if/else, for loops), and whitespace control.
  • Template Inheritance & Macros: Facilitates building reusable components and structured themes using extends, include, and macro definitions.
  • Filters & Functions: Details essential filters for data transformation (e.g., truncatehtml, datetimeformat) and functions for accessing HubSpot data (e.g., blog_recent_posts, hubdb_table_rows).
  • Use Case: When developing a custom HubSpot theme, use this Skill to correctly implement template inheritance for a base layout, define macros for repeatable UI elements like buttons or cards, and apply filters to format blog post dates dynamically.

Quick Start

Use the hubl-templating skill to generate a HubL macro that renders a responsive image with srcset and sizes attributes.

Frequently Asked Questions about hubl-templating

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I format dates and truncate HTML in HubL templates?

HubL provides built-in filters like `datetimeformat` for formatting dates and `truncatehtml` for safely trimming HTML content, allowing you to transform and render dynamic data directly within your HubSpot CMS templates.

What is the best way to create reusable UI components in HubSpot CMS?

The best way to create reusable UI components in HubSpot CMS is to define HubL macros, which allow you to build repeatable elements like buttons or cards and render them dynamically throughout your theme.

How do I access HubDB data and blog posts using HubSpot templating?

You can access HubDB data and blog posts in HubSpot templating by utilizing built-in HubL functions such as `hubdb_table_rows` for database queries and `blog_recent_posts` for retrieving content.

Can I use template inheritance with HubL for custom theme development?

Yes, HubL supports template inheritance for custom theme development through the `extends` and `include` statements, enabling you to build structured base layouts and dynamically inject child content.

Do I need to know Jinja to use HubL for HubSpot CMS development?

You need an understanding of Jinja-like templating to use HubL effectively, as HubL is HubSpot's server-side templating language based on similar syntax and logic patterns for dynamic content rendering.

How do I control whitespace and logic flow in HubSpot server-side templates?

You control whitespace and logic flow in HubSpot server-side templates by using HubL's native control flow statements like if/else conditionals and for loops, alongside specific whitespace control syntax.