{"id":31970546,"url":"https://github.com/hubspot/ui-extensions-examples","last_synced_at":"2025-10-14T19:16:15.937Z","repository":{"id":54798690,"uuid":"513616150","full_name":"HubSpot/ui-extensions-examples","owner":"HubSpot","description":"This repository contains code examples of UI extensions built with HubSpot CRM development tools beta","archived":false,"fork":false,"pushed_at":"2025-05-20T20:21:06.000Z","size":35898,"stargazers_count":99,"open_issues_count":10,"forks_count":78,"subscribers_count":11,"default_branch":"main","last_synced_at":"2025-05-20T21:58:19.482Z","etag":null,"topics":["crm","crm-integration","crm-platform","hubspot","ui-extensions"],"latest_commit_sha":null,"homepage":"https://developers.hubspot.com/docs/platform/sample-projects","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/HubSpot.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2022-07-13T17:39:31.000Z","updated_at":"2025-05-20T21:24:07.000Z","dependencies_parsed_at":"2025-05-20T22:09:38.364Z","dependency_job_id":null,"html_url":"https://github.com/HubSpot/ui-extensions-examples","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/HubSpot/ui-extensions-examples","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HubSpot%2Fui-extensions-examples","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HubSpot%2Fui-extensions-examples/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HubSpot%2Fui-extensions-examples/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HubSpot%2Fui-extensions-examples/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/HubSpot","download_url":"https://codeload.github.com/HubSpot/ui-extensions-examples/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/HubSpot%2Fui-extensions-examples/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020652,"owners_count":26086895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["crm","crm-integration","crm-platform","hubspot","ui-extensions"],"created_at":"2025-10-14T19:16:07.050Z","updated_at":"2025-10-14T19:16:15.931Z","avatar_url":"https://github.com/HubSpot.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"This repository contains helpful examples to get started with using React as a front-end UI extensions. This is available as public beta under [developer beta terms \u0026 agreements](https://legal.hubspot.com/developerbetaterms).\n\nOver the last year, we have received invaluable feedback from our beta participants and active community developers about custom cards available through the CRM development beta. We heard loud and clear that you need:\n\n- More flexible \u0026 interactive front-end to handle complex use cases\n- Developer experience specifically optimized for front-end development.\n\nThe feedback and use cases you've shared with us have helped define the exciting next chapter for UI extensibility at HubSpot, and for that, we are deeply grateful. We're thrilled to invite you to participate in a public beta for our new React-based UI extensions. UI extensions will now enable you to build front-end experiences using frameworks like React while continuing to use HubSpot’s serverless functions as needed. This enables you to leverage the active ecosystem and open-source tooling that React is known for.\n\n---\n\n# README\n\nThis is a collection of HubSpot developer projects with custom CRM cards. Each folder holds a working developer project, including a README with a description on what that example CRM card demonstrates and instructions on how to get the card working in your own HubSpot account.\n\nAccess to these UI Extensions is part of [CRM Development public beta](https://developers.hubspot.com/blog/crm-development-tools-for-hubspot-developers-beta), and more examples will be added over time.\n\n## Prerequisites\n\n- You must have an active HubSpot account with Sales or Service Hub Enterprise access.\n- Your HubSpot account must be enrolled in CRM development tools public beta. You can enroll by visiting [this product update](https://app.hubspot.com/l/product-updates/in-beta?query=crm\u0026update=13899236).\n- You must be using the latest [HubSpot CLI](https://www.npmjs.com/package/@hubspot/cli).\n\n## Quick Start\n\n### Step 1: Update your CLI and \u0026 authenticate your account\n\n1. Update to latest CLI version by running `npm install -g @hubspot/cli@latest`.\n2. Run `hs init` to create a config file for your parent account.\n3. Run `hs auth` to authenticate your account. Alternatively, select your pre-authenticated account with `hs accounts use`.\n\n### Step 2: Create a project\n\nIn the folder where you want a sample to be cloned, create a new project by running `hs project create --templateSource=\"HubSpot/ui-extensions-examples\"`. Give it a name, specify a project directory, and select a sample you'd like to run in your account.\n\n### Step 3: Install dependencies\n\nNow in the CLI, `cd` into your project directory such as `cd \u003cproject_dir\u003e`. Run `npm install` to install the dependencies for this project.\n\n### Step 4: Configure and upload the project\n\nFollow project-specific instructions in the project folder README file. You might need to set up additional environmental variables and provide test data.\n\nRun `hs project upload`. If you’d like to build on this project, run `hs project dev` to kickoff the dev process and see changes reflected locally as you build.\n\n## Lockfiles\n\nIt's best practice to generate package lockfiles before uploading projects. This will help prevent running out of file descriptors during the build, and streamline subsequent builds. To generate a lockfile for a project, either install the project locally using `npm install` or generate the lockfile only using `npm install --package-lock-only`.\n\n## Get started with developer project\n\nUI extensions are created using developer projects that are part of CRM development beta. Read [Quick Start guide](https://developers.hubspot.com/docs/platform/projects-quick-start-guide) for developer projects for instructions to get started.\n\n## Tools available in this repository\n\nESLint and Prettier are included in the root of this repository for ease of development. You can choose whether or not to use them yourself. The usage of ESLint and Prettier in this repository can also serve as an example of how to set them up in your own directory of HubSpot developer projects if you so choose.\n\n### ESLint\n\n[ESLint](https://eslint.org/) is a common, open-source linting tool for JavaScript code. To check for any ESLint errors, use the following command:\n\n```\nnpx eslint .\n```\n\n### Prettier\n\n[Prettier](https://prettier.io/) is an opinionated code formatter. This tool helps developers spend more time coding, and less time on adjusting code style.\n\nPrettier can be set up to run in your editor each time you save a file. Prettier can also be run through the CLI, using the following command:\n\n```\nnpx prettier --write .\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubspot%2Fui-extensions-examples","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhubspot%2Fui-extensions-examples","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhubspot%2Fui-extensions-examples/lists"}