Modules BETA

Table of contents
Close

Basics of building modules

The new IDE streamlines the process of creating and editing modules. It gives you much more flexibility and many powerful new features. We’ve eliminated most modal interfaces and added more intuitive access to fields and options in the control panel. In this section we’ll walk through the basic process of creating a module in the new IDE.

Create a new file

To create a module, click the New button in the Finder panel on the left of the screen, choose New File.

HubSpot Help article screenshot

Choose your file type

In the resulting dialog box, choose Module.

HubSpot Help article screenshot

Choose your module type

In the next dialog, enter a name for your module and choose where you’d like to use it. It’s important to note that there are technical differences between these module types that make them incompatible. Refer to the editor section below for details. For this example, we’ll create a module for page and blog templates. Leave Local module selected. Click Create.

HubSpot Help article screenshot

Add a field

With your new module selected in the Finder panel, click on Add field in the Inspector section on the right side of the screen.>

There are many new field options which are covered in detail in the reference section of this doc. For this example, choose the text field in the Content column on the left of the Add field menu.

HubSpot Help article screenshot

Add default content

Give your new field a name and some Default text.

HubSpot Help article screenshot

Add your field to the module markup

Click Copy snippet in the HubL variable name section of the field editor. Paste the snippet into the HTML + HUBL section of the Editor in the center or the screen.
This Editor is discussed in detail here.

HubSpot Help article screenshot

Exit field editing

To exit editing for this new field and return to editing the entire module, click the module icon in the breadcrumbs at the top of the Inspector.

HubSpot Help article screenshot

Preview your module

Click the Live preview button in the top right corner of the screen. The preview of your module opens in a new tab. This preview is synced to the editor and will automatically refresh as you work. Feel free to move the preview to a new window or monitor.