Project Basics

Projects are the top-level containers for your HubSpot UI extensions. Each project groups related cards together and maps to a single HubSpot developer project.

Creating a Project

1. From the dashboard, click the New Project card (the dashed card at the end of the grid)
2. Enter a project name and optionally a description and icon
3. Click Create

Your project appears on the dashboard grid and is ready for cards and pages.

The Project Grid

The dashboard displays all your projects as cards in a responsive grid. Each card shows:

• Project name and icon
• Creation date
• Status badge — Draft (gray) or Deployed (green)

Projects are assigned a random accent color when created, making them easy to distinguish visually.

Expanding a Project

Click any project card to expand it into the full project view. The expansion animates open to reveal:

• Home Page slot — click to create or edit a Home page
• Settings Page slot — click to create or edit a Settings page
• Cards section — all cards in the project, plus a New Card button

The Action Pill

When a project is expanded, the top bar shows a centered action pill with four buttons:

• Upload — push the project to HubSpot
• Download Code — download the generated source files
• Edit Project — change the project name, description, or icon
• Delete Project — permanently remove the project and all its contents

Project Status

• Draft — the project has been created but not yet uploaded to HubSpot
• Deployed — the project has been uploaded and is live in your portal

The status badge updates automatically after a successful upload.

Editing a Project

Click Edit Project in the action pill to update the project name, description, or icon. Click Save to apply changes.

Deleting a Project

Click Delete Project in the action pill. This permanently removes the project, all its cards, and any associated pages. This action cannot be undone.