Create HubSpot CMS Theme

The quickest way to get started using CMS React is by using @hubspot/create-cms-theme. This CLI tool will generate a starter theme for you to use as a starting point with all the configuration complete and a set of example building blocks to reference or build upon. Speeding up your ability to begin local development with the HubSpot CMS.

Prerequisites

• Node.js (version 20 or higher)
• A HubSpot CMS Developer account (or access to a HubSpot portal with CMS access)

To get started, run the following command:

npx @hubspot/create-cms-theme@latest

After running the command, you will be prompted to answer a few questions to customize your starter theme.

Prompts:

? What is the name of your theme?

This will be the name that appears in the HubSpot CMS UI when selecting a theme and the name of your Project when accessing your build/deploy information.

? What directory do you want to create your theme in?

This is the parent directory that we will create your theme in. For example if the answer to What is the name of your theme? is MyCmsReactTheme and the answer to this question is /your-theme-directory, then the starter theme will be created in /your-theme-directory/MyCmsReactTheme.

? Do you want to use TypeScript?

This will determine if we setup your theme with TypeScript. If you select No, we will setup your theme with JavaScript.

Directory Structure (WIP)

Upon completion, your theme will have this structure:

your-theme-directory/
├── src/
│   └── theme/
│       ├── assets/
│       ├── components/
│       │   └── modules/
│       ├── styles/
│       ├── templates/
│       ├── fields.json
│       ├── theme.json
│       └── package.json
├── package.json
├── hsproject.json

Local Development

After creating your theme, you can begin local development by running:

npm run start

Additional Resources

• CMS React Documentation
• Join the HubSpot developer slack channel