CRM development tools overview (BETA)

APPLICABLE PRODUCTS
  • Sales Hub
    • Enterprise
  • Service Hub
    • Enterprise

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 an app card that retrieves data from an external source.

custom-extension-example

Below, learn more about the CRM development tools and how to get started using them.

CRM development tools

Projects

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. 

Learn more about creating projects, and check out HubSpot's growing list of sample projects to see examples of what's possible.

Private apps

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.

Private apps built with projects currently only support building UI extensions. If you'd like to build a private app to work with HubSpot's other extensions, learn more about the different types of apps and what they support.

UI extensions

UI extensions are custom UI elements that users in the HubSpot account can view and interact with. At this time, possible UI extensions include app cards for CRM records and help desk. For example, you can create a card that enables users to submit form data to an external database from any contact record, or a card that customer support reps can use to take action on open tickets in the help desk UI. 

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 in the form of an app card consisting of HubSpot-provided 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 app cards you can build with projects are separate from HubSpot's other CRM card API extension, and they cannot be built interchangeably.

Learn more about how UI extensions work.

Serverless functions

A serverless function executes server-side JavaScript to provide back end functionality to a UI extensions. Serverless functions are contained within private apps. Serverless functions consist of a folder that contains one or more JavaScript files that export a 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 function command.
  • 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

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.

GitHub integration

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.

Get started

If you're a Super Admin in a Sales Hub or Service Hub Enterprise account, you can join this beta from the Product Updates page in 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 In beta.
  • In the list of betas, search for or scroll to the CRM development tools to build UI extensions with React as frontend beta, then click Join beta.
    crm-development-tools-join-beta

After joining the beta, get started with any of the following options:

More resources

Was this article helpful?
This form is used for documentation feedback only. Learn how to get help with HubSpot.