Developer CMS Features

CMS Hub Development Features Overview

HubSpot CMS Hub is not only easy for marketers to use but also provides flexible customization capabilities for developers.

HubL Template Language

What is HubL?

HubL (HubSpot Markup Language) is the template language dedicated to HubSpot CMS.

By incorporating HubL syntax into HTML, you can generate dynamic content.

HubL Basic Syntax

{# Comment #}

{# Variable output #}
{{ content.meta_description }}

{# Conditional branching #}
{% if request.query_dict.campaign %}
  This is a campaign visit
{% endif %}

{# Loop #}
{% for item in module.items %}
  <div>{{ item.title }}</div>
{% endfor %}

What HubL Can Do

React Support (2025+)

The latest HubSpot CMS now allows building templates and modules with React in addition to HubL.

• Create modules with React components
• Development with local dev server
• Modern frontend development workflow

Design Manager

Visual Development Environment

Design Manager is the developer tool within HubSpot CMS. Edit templates and modules in the browser.

Main Features

• File management: Manage templates, CSS, JS, and image files
• Code editor: Editor with syntax highlighting
• Preview: See edit results in real-time
• Version control: Save and restore change history

File Structure

/templates
  ├── pages
  │   ├── home.html
  │   └── about.html
  ├── partials
  │   ├── header.html
  │   └── footer.html
  ├── layouts
  │   └── base.html
  └── blog
      ├── blog-listing.html
      └── blog-post.html
/modules
  ├── hero-banner.module
  └── cta-button.module
/css
  └── main.css

Custom Modules

What are Modules?

Modules are reusable components that can be placed on pages.

Marketers can drag and drop to place them and edit content from the settings screen.

Module Components

Field Types

Main input field types available in modules.

Custom Module Example

CTA button module example:

// fields.json
[
  {
    "name": "button_text",
    "label": "Button Text",
    "type": "text",
    "default": "Learn More"
  },
  {
    "name": "button_link",
    "label": "Link Destination",
    "type": "link"
  },
  {
    "name": "button_style",
    "label": "Style",
    "type": "choice",
    "choices": [
      ["primary", "Primary"],
      ["secondary", "Secondary"]
    ]
  }
]

Theme Development

HubSpot Theme Structure

Themes are packages for unifying design across the entire site.

Elevate Theme

"Elevate," provided as the default theme from 2025, has these features:

• Customizable template collection
• Modern design patterns
• Easy brand customization through theme settings
• Responsive design support

Staging & Publishing Management

Drafts and Preview

• Draft save: Save changes as drafts before publishing
• Preview links: Share unpublished pages with stakeholders
• Device preview: Check display on PC/tablet/mobile

Scheduled Publishing

• Auto-publish at specific date/time
• Simultaneous publishing for campaign launches
• Schedule management across multiple pages

Version Control

• Revision history: Save past edits
• Rollback: Revert to previous versions
• Change diff: See what changed

Local Development Environment

HubSpot CLI

Command-line tool enables local development.

# Install CLI
npm install -g @hubspot/cli

# Initialize project
hs init

# Upload files
hs upload src dist

# Watch files (auto-upload)
hs watch src dist

Development Workflow

Summary

CMS Hub Professional's developer features enable:

• Flexible customization: Free template development with HubL
• Reusability: Componentize with custom modules
• Visual development: In-browser editing with Design Manager
• Modern development: React support, CLI, local development
• Safe publishing: Staging, preview, version control

Build a CMS environment that balances marketer usability with developer flexibility.