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

**URL:** <https://community.hubspot.com/t/how-can-i-properly-create-a-hubspot-ui-extension-using-react/134479>\
**Category:** CMS Development\
**Tags:** local-development\
**Created:** [June 13, 2025, 1:12pm UTC](https://community.hubspot.com/t/how-can-i-properly-create-a-hubspot-ui-extension-using-react/134479 "2025-06-13T13:12:29Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![guilhermenetode](https://avatars.discourse-cdn.com/v4/letter/g/f6c823/32.png) [@guilhermenetode](https://community.hubspot.com/u/guilhermenetode)\
**Post date:** [June 13, 2025, 1:12pm UTC](https://community.hubspot.com/t/how-can-i-properly-create-a-hubspot-ui-extension-using-react/134479/1 "2025-06-13T13:12:29Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![Jaycee\_Lewis](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jaycee_lewis/32/61352_2.png) [@Jaycee\_Lewis](https://community.hubspot.com/u/Jaycee_Lewis)\
**Post date:** [June 14, 2025, 2:49am UTC](https://community.hubspot.com/t/how-can-i-properly-create-a-hubspot-ui-extension-using-react/134479/2 "2025-06-14T02:49:23Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kosalaindrasiri](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/kosalaindrasiri/32/44349_2.png) [@kosalaindrasiri](https://community.hubspot.com/u/kosalaindrasiri)\
**Post date:** [June 16, 2025, 11:46am UTC](https://community.hubspot.com/t/how-can-i-properly-create-a-hubspot-ui-extension-using-react/134479/3 "2025-06-16T11:46:59Z")

</div>

Hey @guilhermenetode,

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

[@Jaycee\_Lewis](https://community.hubspot.com/t5/user/viewprofilepage/user-id/127074)gave a great clarification too.

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

- [UI Extensions Overview](https://developers.hubspot.com/docs/guides/crm/ui-extensions/overview)
- [UI Extensions Examples (GitHub repo)](https://github.com/HubSpot/ui-extensions-examples)

Regards,