A starter project for building custom-coded React modules for HubSpot Revenue Hub quote templates.
This repo gives you a working example you can fork or copy: a typed React module that pulls quote and CRM data from HubL and hydrates an interactive island on the client.
src/cms-assets/my-react-assets/
└── components/modules/
├── QuoteExampleModule/
│ ├── index.tsx # Module entry: fields, hublDataTemplate, Component
│ └── islands/InteractiveButton.tsx # Client-hydrated island
├── ConditionalTermsModule/
│ ├── index.tsx # Conditional sections based on line items
│ ├── fields.tsx # Editor fields (heading, intro, background color)
│ └── termsData.ts # Hardcoded clause text by section
└── RequiredAgreementModule/
├── index.tsx # Module entry with editor detection
├── fields.tsx # Editor fields (heading, terms, disabled reason)
├── islands/TermsAcceptance.tsx # useQuoteAcceptance hook + checkbox gating
└── TermsAcceptance.module.css # Scoped styles
The example module demonstrates:
- Typed
hublDataandfieldValues— using@hubspot/quote-dev-sdkfor compile-time safety against thequoteTemplateContextshape. - HubL CRM querying — calling
crm_object()from the module'shublDataTemplateto fetch company data on the server. - Editor detection — rendering a non-interactive placeholder when
is_in_editor, and an<Island>when published.
- Node.js 20+
- The HubSpot CLI (
npm install -g @hubspot/cli) authenticated against the portal you want to deploy to (hs auth).
npm install
npm startnpm install installs both root and src/cms-assets/my-react-assets/ dependencies (the inner install runs as a postinstall step). npm start boots hs-cms-dev-server from the React assets directory and serves a local preview of the module.
npm run deployThis calls hs project upload on the configured portal.
- CMS React + HubL overview
@hubspot/quote-dev-sdkREADME — type reference and patterns@hubspot/cms-components— fields,<Island>, and other primitives
MIT — see LICENSE.