--- title: HubSpot React + HubL Custom Modules | Build Reusable SEO-Friendly CMS Components description: Learn about HubSpot custom modules with React + HubL themes. Build reusable, SEO-friendly modules for HubSpot CMS with live preview and modern front-end workflow. image: https://www.hubdev.in/hubfs/Profile/Images/HubDev-hubspot-react-hubl-custom-modules.png --- [Skip to content](https://www.hubdev.in/references/hubspot-react-hubl-custom-modules#main-content) Close - [Home](https://www.hubdev.in) - [Projects](https://www.hubdev.in/projects) - [Reviews](https://www.hubdev.in/reviews) - Tools - [Resume Builder](https://www.hubdev.in/modern-responsive-resume-builder) - [Logo Maker](https://www.hubdev.in/logo-creator) - [Compress Images](https://www.hubdev.in/tools/compress-image) - [HTML Cleaner](https://www.hubdev.in/tools/html-cleaner) - [Interest Calculator](https://www.hubdev.in/interest-calculator) - [SIP Calculator](https://www.hubdev.in/sip-calculator) - [Spin the Wheel](https://www.hubdev.in/spin-to-win) - [Email Signature Generator](https://www.hubdev.in/tools/email-signature-generator) - [Image to Text Extractor](https://www.hubdev.in/image-text-extractor) - [Text Converter](https://www.hubdev.in/text-transformer) - [Say Hi](https://www.hubdev.in/contact) SEARCH [Read All Articles](https://www.hubdev.in/references) [![logo](https://www.hubdev.in/hs-fs/hubfs/Profile/hub-dev-logo.png?width=400&height=107&name=hub-dev-logo.png "logo")](https://www.hubdev.in)[![hd-hubdev-gold](https://www.hubdev.in/hs-fs/hubfs/hd-hubdev-gold.png?width=222&height=70&name=hd-hubdev-gold.png)](https://www.hubdev.in) - [Home](https://www.hubdev.in) - [Projects](https://www.hubdev.in/projects) - [Reviews](https://www.hubdev.in/reviews) - Tools - [Resume Builder](https://www.hubdev.in/modern-responsive-resume-builder) - [Logo Maker](https://www.hubdev.in/logo-creator) - [Compress Images](https://www.hubdev.in/tools/compress-image) - [HTML Cleaner](https://www.hubdev.in/tools/html-cleaner) - [Interest Calculator](https://www.hubdev.in/interest-calculator) - [SIP Calculator](https://www.hubdev.in/sip-calculator) - [Spin the Wheel](https://www.hubdev.in/spin-to-win) - [Email Signature Generator](https://www.hubdev.in/tools/email-signature-generator) - [Image to Text Extractor](https://www.hubdev.in/image-text-extractor) - [Text Converter](https://www.hubdev.in/text-transformer) - [Say Hi](https://www.hubdev.in/contact) [Read All Articles](https://www.hubdev.in/references) Quick results for "{search\_term}" ![An imaginative, vibrant landscape with lush green hills, a winding river, and fantastical, colorful rock formations under a swirling, dynamic sky. The scene is filled with energy, movement, and a sense of creativity.](https://www.hubdev.in/hs-fs/hubfs/Profile/Images/HubDev-hubspot-react-hubl-custom-modules.png?width=300&name=HubDev-hubspot-react-hubl-custom-modules.png) [King DJ](https://www.hubdev.in/references/author/hubdev)3 September 20251 min read # Understanding Custom Modules in HubSpot React + HubL Themes [Previous](https://www.hubdev.in/references/create-a-logo-for-your-brand) [Next](https://www.hubdev.in/references/hubspot-react-cms-development-guide) The true power comes from **custom modules when building a HubSpot CMS React theme**. These modules let you create **reusable, dynamic, and interactive components** that blend HubSpot’s HubL templating language with modern React. ### Where Custom Modules Live Inside your theme project, HubSpot automatically organizes modules under: ``` src/theme/my-theme/components/modules ``` Example structure: ``` modules/ └── getting-started/ ├── fields.json ├── index.tsx ├── getting-started.module.css ```   #### Anatomy of a Custom Module ##### 1. `fields.json` – Define Content Fields This file tells HubSpot **what inputs content creators can configure** in the page editor. ``` { "label": "Hero Banner", "global": false, "icon": "image", "host_template_types": ["PAGE"], "is_available_for_new_content": true, "fields": [ { "name": "title", "label": "Banner Title", "type": "text", "default": "Welcome to HubSpot React Theme" }, { "name": "backgroundImage", "label": "Background Image", "type": "image" } ] } ``` ##### 2. `index.tsx` – React Component ``` import React from "react"; import styles from "./getting-started.module.css"; const HeroBanner = ({ title, backgroundImage }) => { return ({title}); }; export default HeroBanner; ``` ##### 3. `getting-started.module.css` – Styling ``` :root { --hero-bg: #5e6ab8; } .wrapper { padding: 80px; background-color: var(--hero-bg); color: #fff; text-align: center; } ```   #### Local Development Workflow - Start the dev server: `npm run start` - Open [http://hslocal.net:3000](http://hslocal.net:3000) - Edit your module → save → instant auto-refresh in browser   #### SEO Benefits of Custom Modules - **Faster page loads** – React + HubL hybrid builds clean, optimized HTML - **Structured fields** – Consistent, SEO-friendly layouts - **Schema-ready** – Extend modules with JSON-LD for rich snippets - **Scalability** – Build once, reuse everywhere, avoid duplicate content issues   #### Key Takeaway Custom modules in a **HubSpot React + HubL theme** are not just “fancy widgets.” They’re **scalable, marketer-friendly, SEO-optimized building blocks** that make development and content management seamless. Whether it’s a *hero banner, testimonial slider, or pricing table*, building modules with React unlocks the best of modern front-end while keeping HubSpot’s CMS flexibility. As you explore the capabilities of custom modules, know that creating, optimizing, and maintaining these components in HubSpot’s ever-evolving CMS environment requires both experience and precision. With extensive hands-on expertise in HubSpot CMS and familiarity across its CRM ecosystem, I empower HubSpot Portal to turn these advanced capabilities into fully functional, high-performing websites that drive results. ![avatar](https://www.hubdev.in/hs-fs/hubfs/Profile/dj-author-circle2-1.png?width=290&name=dj-author-circle2-1.png) #### [King DJ](https://www.hubdev.in/references/author/hubdev) Building custom HubSpot CMS themes, HUBL modules, smart forms, and dynamic quote templates—optimized for speed, scalability, and CRM integration. ## RELATED ARTICLES [![hubdevfooterLogo](https://8785843.fs1.hubspotusercontent-na1.net/hub/8785843/hubfs/hubdevfooterLogo.png?width=201&name=hubdevfooterLogo.png)](https://www.hubdev.in) #### HubSpot CMS Developer · Front-End Engineer Building custom HubSpot websites, modules, CRM-driven experiences, and front-end solutions with 12+ years of development experience. - [![India](https://www.hubdev.in/hubfs/Profile/india.png)](https://www.hubdev.in/contact) - [Contact Developer](https://www.hubdev.in/contact) HubSpot React / Custom Object / HubDB / JavaScript / HUBL / HTML / CSS / Jinja - [Terms](https://www.hubdev.in/terms-of-service) - [PayPal](https://www.paypal.com/paypalme/DeepakJha999) - [Codepen](https://codepen.io/Deets_HubDev) - [Optimization](https://www.hubdev.in/page-speed-results) - [My Resume](https://www.hubdev.in/developer-resume) ```json { "@context" : "https://schema.org", "@type" : "Organization", "address" : { "@type" : "PostalAddress", "addressCountry" : "India", "addressLocality" : "DBG", "addressRegion" : "BH", "postalCode" : "", "streetAddress" : "LHS" }, "knowsLanguage" : "en", "logo" : { "@type" : "ImageObject", "url" : "https://hubdev.in/hubfs/Profile/hub-dev-logo.png" }, "name" : "HubDev", "url" : "https://www.hubdev.in/references/hubspot-react-hubl-custom-modules" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "abstract" : "Learn about HubSpot custom modules with React + HubL themes. Build reusable, SEO-friendly modules for HubSpot CMS with live preview and modern front-end workflow.", "author" : { "@type" : "Person", "name" : "King DJ" }, "dateModified" : "September 2, 2025 8 PM", "datePublished" : "September 2, 2025 7 PM", "headline" : "Understanding Custom Modules in HubSpot React + HubL Themes", "image" : "https://8785843.fs1.hubspotusercontent-na1.net/hubfs/8785843/Profile/Images/HubDev-hubspot-react-hubl-custom-modules.png", "inLanguage" : "en", "keywords" : "[HubSpot CMS, Custom Modules, React Modules]", "mainEntityOfPage" : { "@type" : "WebPage" }, "name" : "Understanding Custom Modules in HubSpot React + HubL Themes", "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://hubdev.in/hubfs/Profile/hub-dev-logo.png" }, "name" : "HubDev" }, "text" : "The true power comes from custom modules when building a HubSpot CMS React theme. These modules let you create reusable, dynamic, and interactive components that blend HubSpot’s HubL templating language with modern React. Where Custom Modules Live Inside your theme project, HubSpot automatically organizes modules under: src/theme/my-theme/components/modules Example structure: modules/ └── getting-started/ ├── fields.json ├── index.tsx ├── getting-started.module.css Anatomy of a Custom Module 1. fields.json – Define Content Fields This file tells HubSpot what inputs content creators can configure in the page editor. { \"label\": \"Hero Banner\", \"global\": false, \"icon\": \"image\", \"host_template_types\": [\"PAGE\"], \"is_available_for_new_content\": true, \"fields\": [ { \"name\": \"title\", \"label\": \"Banner Title\", \"type\": \"text\", \"default\": \"Welcome to HubSpot React Theme\" }, { \"name\": \"backgroundImage\", \"label\": \"Background Image\", \"type\": \"image\" } ] } 2. index.tsx – React Component import React from \"react\"; import styles from \"./getting-started.module.css\"; const HeroBanner = ({ title, backgroundImage }) => { return ({title}); }; export default HeroBanner; 3. getting-started.module.css – Styling :root { --hero-bg: #5e6ab8; } .wrapper { padding: 80px; background-color: var(--hero-bg); color: #fff; text-align: center; } Local Development Workflow Start the dev server: npm run start Open http://hslocal.net:3000 Edit your module → save → instant auto-refresh in browser SEO Benefits of Custom Modules Faster page loads – React + HubL hybrid builds clean, optimized HTML Structured fields – Consistent, SEO-friendly layouts Schema-ready – Extend modules with JSON-LD for rich snippets Scalability – Build once, reuse everywhere, avoid duplicate content issues Key Takeaway Custom modules in a HubSpot React + HubL theme are not just “fancy widgets.” They’re scalable, marketer-friendly, SEO-optimized building blocks that make development and content management seamless. Whether it’s a hero banner, testimonial slider, or pricing table, building modules with React unlocks the best of modern front-end while keeping HubSpot’s CMS flexibility. As you explore the capabilities of custom modules, know that creating, optimizing, and maintaining these components in HubSpot’s ever-evolving CMS environment requires both experience and precision. With extensive hands-on expertise in HubSpot CMS and familiarity across its CRM ecosystem, I empower HubSpot Portal to turn these advanced capabilities into fully functional, high-performing websites that drive results.", "url" : "https://www.hubdev.in/references/hubspot-react-hubl-custom-modules", "wordCount" : "525" } ``` ```json { "@context" : "https://schema.org", "@type" : "BlogPosting", "author" : { "@type" : "Person", "name" : "King DJ", "url" : "https://www.hubdev.in/references/author/hubdev" }, "dateModified" : "2025-09-02T20:13:18.167Z", "datePublished" : "2025-09-02T19:50:53.000Z", "headline" : "HubSpot React + HubL Custom Modules | Build Reusable SEO-Friendly CMS Components", "image" : [ "https://www.hubdev.in/hubfs/Profile/Images/HubDev-hubspot-react-hubl-custom-modules.png" ], "mainEntityOfPage" : { "@id" : "https://www.hubdev.in/references/hubspot-react-hubl-custom-modules", "@type" : "WebPage" }, "publisher" : { "@type" : "Organization", "logo" : { "@type" : "ImageObject", "url" : "https://www.hubdev.in/hubfs/Profile/hub-dev-logo.png" }, "name" : "Deets Engineering Space Station" } } ```