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

example-crm-card-code-crop2

 

 example-crm-card-button-click

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. They are the framework with which you build private apps, which then contain UI extensions. You create a project and its assets locally using the CLI to package, build, and deploy to HubSpot.

Once deployed to an account, you can view and manage the project and its apps and UI extensions. This includes viewing build history and monitoring API calls. 

Learn more about creating projects.

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 power UI extensions. A project can contain multiple private apps, and private apps can contain multiple UI extensions. 

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, 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. UI extensions are contained within private apps, which execute serverless functions to provide functionality. The custom cards you can build with projects are separate from HubSpot's other CRM card API extension, and they cannot be built interchangeably.

In your HubSpot account, you can use the UI extensions playground to view the available card components, then copy and paste code into your own project. You can also use the UI extensions playground to view responses for actions and events, such as button clicks.

Learn more about creating custom cards with projects.

Serverless functions

Serverless functions run JavaScript that provide functionality and components to UI extensions, and are executed server-side by HubSpot. 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 once created are accessible within the 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 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 Extend Record Pages Middle Pane and Sidebar beta, then click Join beta.
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 with the HubSpot projects guide.

More resources

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