HS Moduler — Module Builder for HubSpot

🧩 HS Moduler — design custom modules visually, export them ready to upload Stop hand-writing fields.json. HS Moduler lets you design a HubSpot CMS custom module by dragging elements onto a canvas, then generates the real module files — module.html, fields.json, meta.json, module.css and module.js — and saves them straight into the folder your HubSpot CLI is watching. Design it, save it, and `hs watch` uploads it. ⚡ From canvas to uploaded module in one click • Save to folder — pick your project's modules folder once; every export writes <name>.module/ right into it. Run `hs watch` and HubSpot picks the files up automatically. (The folder is remembered, and Chrome asks you to re-allow access once per session.) • Or download a ZIP straight to your Downloads folder and drag it into Design Manager. • A built-in checker flags anything HubSpot rejects on upload — reserved field names, nested repeaters, duplicate ids — before you export, not after. 🎨 Drag-and-drop design, real HubSpot fields • Headings, text, rich text, buttons, links, images, columns, sections and repeater groups. • Field-only elements — Boolean, Choice, Number, URL, Color, Date — plus "Show when" rules that hide or reveal an element (and its fields in the editor) based on a boolean. • Fields are generated the way HubSpot expects: proper types, defaults, groups, link fields with new-tab and nofollow, native spacing fields. • Edit defaults right in the builder and watch the canvas update. 🎛️ Options your editors control, not just you • Every design option — alignment, heading tag, button style and size, image ratio and corner radius, column gap, grid columns, card style — can become a real HubSpot field with one toggle. On: editors change it on the Styles tab. Off: it stays fixed in your CSS. • Any style you set (text color, background, font size, padding, border) can be handed to editors the same way. • Put a repeater inside a section, lay its items out as a grid, and style each one as a card. 📱 Responsive styling editors can actually use • Every Pro section gets its own Styles group: padding for desktop and mobile, plus theme colors — all real HubSpot fields your editors can change without touching code. • Styles are written to module.css and to a scoped {% require_css %} block, mobile-first with a desktop breakpoint. • Behavior (tabs, sliders, banners) lives in module.js, not in inline scripts. 👀 Live preview you can trust The Preview tab renders your generated module.html and module.css with your default values — the same files you export — at desktop, tablet and mobile widths. What you see is what the export contains. ✨ 30 ready-made sections (2 free) Hero, pricing, FAQ, testimonials, feature grid, slider, tabs, team, timeline, stats, data table, cookie banner, header with dropdown menus, and more. Each one ships with the fields it needs — images, links, repeaters, colors, spacing — already wired up. Hero and FAQ are free to use, no license needed. 💾 Your work stays yours • Autosaves in your browser — close the tab and pick up where you left off. • Undo/redo, duplicate, drag to reorder, move elements in and out of columns. • Nothing is uploaded anywhere. Your modules never leave your computer unless you save them. 💳 Free and Pro Free: the full builder, live preview, folder and ZIP export, and the Hero and FAQ sections. Pro ($49/year, billed and licensed through Lemon Squeezy): all 30 sections plus Video, Form and CTA elements. Cancel anytime and Pro stays active until the end of your paid period. License activation is done from inside the extension and a key works on a limited number of devices. Who it's for: • HubSpot developers who are tired of writing field JSON by hand • Agencies building repeatable module libraries for clients • Designers who want to prototype a module before handing it to a developer Requirements: Chrome 102 or newer on desktop. "Save to folder" uses Chrome's folder picker; Chrome will not let you pick a drive root or the Downloads/Documents folders themselves, so choose a project folder inside them. HS Moduler is an independent tool. It is not affiliated with, endorsed by, or sponsored by HubSpot, Inc. HubSpot is a trademark of HubSpot, Inc.