Module view and code

The module view is where you edit a module's code: its HTML, CSS, JavaScript, and HubSpot fields. Use it for the module work you would normally do in HubSpot's design tools. The preview sits beside the chat, and your changes are saved as HubSpot drafts on your portal until you publish them.

Sprocket Rocket AI works here too. Ask the chat for a change while a module is open and it edits that module while you watch the preview.

Open a module's code

• On a page: select a module on the canvas, then Edit code in its toolbar. The back link in the header returns to the page. For a stock Sprocket Rocket module, select Clone and edit: stock modules are never edited in place, so you change a copy.
• From Modules: open a module in the top bar's Modules and select Open code. A stock module has View code, read-only, and Clone and edit.
• From the chat: ask for a change to one of your modules and Sprocket Rocket opens it. A module card has Open code, and a background build opens its module beside the chat once there's something to see.

The header names the module and links back one level, such as Modules / Hero Banner.

You don't always need to open the code yourself. When a page needs a module the library doesn't have, Sprocket Rocket proposes a module card. Once you confirm it, Sprocket Rocket builds and publishes the module in the background and places it on the page. See Build and change modules.

Work with Sprocket Rocket AI

With a module open, the composer reads Ask for a change to and the module's name. Describe the change and attach a reference image when the look matters. The code is locked while Sprocket Rocket edits it, and the preview updates as it goes.

This work uses the organization's AI usage. See Sprocket Rocket AI.

Code and preview

The toolbar has a tab for the Preview and one for each file: HTML (the HubL markup), CSS, JS, and Fields. The preview shows the module on its own. Use Desktop, Tablet, and Phone to check common widths.

The code editor highlights HubL inside HTML, flags JSON errors as you type, and keeps undo for each file. Press Ctrl+F (Cmd+F on a Mac) to search and replace, and Ctrl+S (Cmd+S) to save.

Drafts, publish, and history

• Save appears once you change a file. It saves your change as a HubSpot draft, and live pages keep the published module until you publish. If HubSpot refuses a file, such as fields it can't accept, your previous version stays the draft.
• The label beside the module's name says where it stands: Published, Unpublished changes, or Not published yet.
• Publish makes the drafts live. On a module that's already live, the button reads Update. Publishing a change to one of the portal's own modules updates every page that uses it, live pages included.
• Version history lists saved versions, including each change Sprocket Rocket made. Restore puts one back as the draft, and any member who can edit the module can do it.
• More actions has Rename, Save as new, which copies the module under a new name, Edit in HubSpot, which opens it in the Design Manager, and Discard changes, which puts the module back to its published version. On a module that was never published, it reads Delete module and asks first.

Drafts are stored in HubSpot. Publishing the module from HubSpot's Design Manager also makes them live.

Where you can edit module code