Code Preview
The editor’s right panel includes a Code tab that shows the generated source code for your component. This is the actual code that gets uploaded to HubSpot.
Viewing the Code
Section titled “Viewing the Code”Click the Code tab in the right panel to see the generated source. The code is displayed with syntax highlighting for TSX, TypeScript, and other file types, making it easy to read.
What You See
Section titled “What You See”The code panel shows the complete source file for your component, including:
- Imports — SDK component imports from the HubSpot UI Extension SDK
- Component logic — data fetching, state management, and event handlers
- JSX markup — the component’s UI structure using SDK components
- Types — TypeScript type definitions where applicable
File Structure
Section titled “File Structure”Each card or page generates a single TSX file that contains everything needed for the component. The code follows HubSpot UI Extension SDK conventions and uses the components visible in the gallery.
Expanding the Code View
Section titled “Expanding the Code View”If you need more space to read the code, you can collapse the prompt panel on the left side using the toggle button. This gives the code view the full width of the editor.
Code Quality
Section titled “Code Quality”The agent generates production-ready code that:
- Uses proper TypeScript types
- Follows HubSpot UI Extension SDK best practices
- Includes error handling where appropriate
- Is formatted and readable
The code you see is the same code that gets packaged when you click Upload or Download Code from the project view.