Create a bulk action (BETA)

​

Prerequisites

• Ensure you’ve installed the latest beta version of the HubSpot CLI.
• If you haven’t done so yet, create a new app.
• In your project’s hsproject.json file, set platformVersion to 2026.09.

​

Create a bulk action

1

Add a bulk action component to your project

To add a new bulk action component to an existing project:

1. Use the terminal to navigate into your local project directory, then run the following command:

hs project add

2. When prompted to select a component to add, select Bulk action.

A new actions/ directory will be created in the project’s src/app/ directory. The actions/ directory will contain:

• A JSON configuration file (*-hsmeta.json)
• A React component file (.tsx)
• A package.json file

myProject
└── src/
    └── app/
        └── actions/
            ├── NewAction-hsmeta.json
            ├── NewAction.tsx
            └── package.json

• NewAction-hsmeta.json
• NewAction.tsx
• package.json

{
  "uid": "action_extension",
  "type": "crm-bulk-action",
  "config": {
    "label": "New Bulk Action",
    "entrypoint": "/app/actions/NewAction.tsx",
    "objectTypes": [
      "contacts"
    ],
    "displayMode": "PANEL",
    "icon": "forward"
  }
}

import React from "react";
import { Text, hubspot } from "@hubspot/ui-extensions";

hubspot.extend(({ context }) => <BulkAction context={context} />);

const BulkAction = ({ context }) => {
  return (
    <Text>Build your bulk action here!</Text>
  );
};

{
  "name": "hubspot-example-extension",
  "version": "0.1.0",
  "license": "MIT",
  "dependencies": {
    "@hubspot/ui-extensions": "latest",
    "react": "^18.2.0"
  },
  "devDependencies": {
    "typescript": "^5.3.3"
  }
}

2

Upload to HubSpot

To upload your bulk action to HubSpot:

1. Run hs project install-deps from within your local project directory to install necessary dependencies. This will create a package-lock.json file, which speeds up the build of the uploaded bulk action extension and ensures that any dependencies in your local development environment and production match.
2. Run hs project upload.
3. After the project finishes deploying, open the project in HubSpot by running hs project open. Alternatively, in HubSpot you can navigate to Development > Projects, then click the name of your project.
4. Your bulk action component should now be listed on the details page.

​

View the bulk action in HubSpot

1. In your HubSpot account, navigate to a CRM object index page. For example, navigate to CRM > Contacts.
2. Select the checkboxes of records for which to test bulk actions.
3. At the top of the table, click More.
4. Your bulk actions will be listed under your app’s name at the bottom of the menu.

5. After clicking on your action’s name, it will open as either a modal or panel (depending on how you configured it in the hsmeta.json file).

• Use hubspot.fetch() to leverage your backend to retrieve and act on data. Learn more about fetching data in UI extensions.
• Check out the reference documentation on standard components for how to use React components when building your extension, or use the component in the Figma Design Kit.
• Use the hs project dev command to iteratively build out your bulk action and preview your changes locally.

​

Bulk action configuration

{
  "uid": "action_extension",
  "type": "crm-bulk-action",
  "config": {
    "label": "New Bulk Action",
    "entrypoint": "/app/actions/NewAction.tsx",
    "objectTypes": [
      "contacts"
    ],
    "displayMode": "PANEL",
    "icon": "forward"
  }
}