New in Design Manager: HubL Transpiler and Javascript Linting

[Product-Updates]

Developers use HubL to create all kinds of custom modules and templates for HubSpot pages. In the past, it was difficult to understand how HubL would render on a page without publishing and previewing it.

Now when working inside the Design Manager, developers have access to a HubL transpiler which gives them a real-time look at how the code they have written will appear on live pages. Plus, we’ve added JavaScript linting suggestions while editing JavaScript files which provides suggestions for keeping the code clean – making it easy to maintain and scale.

Here’s how it works:

When editing any HTML, CSS or JavaScript coded files within the Design Manager, developers will see the option to “Show output”. When toggled on, a side-by-side, code output panel will appear on the right side of the Design Manager, displaying the final rendered output of their code.

For JavaScript linting you need to first enable the suggestions in Design Manager Settings. Once it's turned on, the suggestions will show up in the output panel of JavaScript files. You can also configure a ESLint file to further customize the default linting suggestions based on your own preferred code writing styles.

The HubL transpiler and JavaScript linting are currently in an open beta for customers with Marketing Hub Professional, Enterprise, and/or HubSpot CMS.

ESLint JavaScript linting suggestions are currently only supported in English. The other components and wording are available in all HubSpot supported languages.