How can I properly create a HubSpot UI Extension using React?

[guilhermenetode]

Hi everyone,

I’m trying to create a UI Extension in HubSpot CRM using React (as an iframe-based extension), not a CRM card.

I already have a Developer Account with UI Extensions Beta enabled.

However, it’s still a bit confusing with the current flow — there’s a difference between Apps and Projects, and I want to understand the correct and supported way to create an actual iframe-based UI Extension that runs a React app inside the CRM (sidebar, card, or tab).

My questions are:

Should I create a Project using the CLI with hs project create --template=ui-extension?
Do I still need to create an App separately in the Developer Portal and link my deployed React app to an Extension Point?
Is there an official example of a React-based UI Extension using postMessage to communicate with HubSpot CRM?

If anyone can share a clear and updated flow for June 2025, that would be super helpful.

Thanks in advance!

[kosalaindrasiri · Accepted solution]

Hey @guilhermenetode,

It’s definitely a bit confusing at first, especially with the mix of Apps vs. Projects vs. Extensions.

@Jaycee_Lewisgave a great clarification too.

I’d recommend checking out these docs as well, they help a lot;

• UI Extensions Overview
• UI Extensions Examples (GitHub repo)

Regards,

[Jaycee_Lewis]

Hey hey @guilhermenetode 👋 Thanks for the great question. Here's how I think about it:

• think of a Project as your local coding workspace, created with the HubSpot CLI. It's where you build your extension
• the App is the final product in the developer portal that users install. It handles authentication and permissions
• you simply link your deployed Project to an App to make it live for users

If you run into any specific errors while you're getting set up, don't hesitate to post back here or create a new thread.

Have fun building! — Jaycee