CRM development tools overview (BETA)
HubSpot's CRM development tools enable you to customize your CRM with UI extensions, with features like development sandboxes, version control, and GitHub integration to streamline your development process. Starting in your local environment, you can use these tools to build and deploy UI extensions across CRM records to customize user experience along with sending and retrieving data as needed.
For example, you can build a custom card that retrieves data from an external source.
Below, learn more about the CRM development tools and how to get started using them.
Projects are the highest-level container that you'll create using the CRM development tools. Projects enable you to locally build and deploy private apps, UI extensions, and serverless functions using the CLI. Once deployed to an account, you can view and manage the project and its apps and UI extensions in HubSpot. This includes viewing build history and monitoring API calls.
Private apps enable you to send and retrieve data using the private app's access token for authentication. Private apps also execute serverless functions that server as the backend for UI extensions. A project can contain one private app, and each private app can contain multiple UI extensions and serverless functions.
Learn more about creating private apps.
UI extensions are custom UI elements that users in the HubSpot account can view and interact with. At this time, custom cards for CRM records are the only available UI extension. For example, you can create a custom card that enables users to submit form data to an external database from any contact record.
UI extensions are built using projects and consist of a front end and back end:
- UI extension front end: the user-facing part of the extension, which consists of HubSpot-built components. Along with displaying information, users can interact with components to perform a variety of actions. You'll build the frontend with either React or TypeScript.
- UI extension back end: the serverless function which enables a UI extension to send, and retrieve data to display in components. Powered by the project's private app, a serverless function can be reused by multiple components as needed.
The custom cards you can build with projects are separate from HubSpot's other custom card API extension, and they cannot be built interchangeably.
Learn more about how UI extensions work.
main function, and a
serverless.json file that registers and configures your functions.
While similar in concept, serverless functions used in projects are different from the serverless functions used by the HubSpot CMS. Some of these differences include:
- You cannot create a serverless function in a project with the
hs create functioncommand.
- Serverless functions created in projects cannot be used for CMS pages.
- Serverless functions created in projects don't appear in the design manager.
To build serverless functions for CMS pages, check out the CMS developer documentation.
Development sandboxes enable you to develop projects in a lightweight testing environment to ensure your project's components work as expected before deploying to a standard sandbox or production account.
Development sandboxes are created through the CLI and can be accessed within the production HubSpot account. Development sandboxes sync some account assets on creation, but not all, and have additional limits compared to standard sandboxes.
Learn more about setting up a development sandbox.
If you prefer to use GitHub for version control, you can connect a GitHub repository to a project to automatically trigger project builds when you push a change to the connected repository. This enables you to use GitHub tools and workflows to streamline development, whether you work alone or with a team.
If you're not currently enrolled in the CRM development tools beta, you can join directly form your HubSpot account:
- In your HubSpot account, click your account name in the top right corner, then click Product updates.
- In the left sidebar, select Betas.
- In the list of betas, scroll to the [Public Beta] CRM development tools to build UI extensions with React as frontend beta, then click Join beta.
After joining the beta, get started by checking out the quickstart guide to quickly build and deploy a working example custom card to the account. Or build your project from scratch by starting with the HubSpot projects guide.
Thank you for your feedback, it means a lot to us.