Live Preview

The editor’s right panel includes a Preview tab that shows an approximate rendering of your component. This gives you a quick visual of what the agent has built without needing to upload to HubSpot.

Using the Preview

Click the Preview tab in the right panel to see the rendered component. The preview updates automatically each time the agent generates or updates code.

Approximate Rendering

The preview provides a close approximation of how your component will look, but it is not a pixel-perfect replica of the HubSpot environment. Some differences to keep in mind:

• SDK components are rendered with similar styling but may not match HubSpot’s exact design tokens
• CRM data is simulated — the preview uses placeholder values rather than live data from your portal
• Some interactive behaviors (like CRM actions or navigation) are not functional in the preview

For a fully accurate representation, upload your project to HubSpot and view it there.

Seeing the Full Result in HubSpot

For full-fidelity rendering:

1. Click Upload in the project view’s action pill to push the project to HubSpot
2. Navigate to the relevant CRM record page in HubSpot
3. Your card appears in the location you specified (Record Tab, Record Sidebar, etc.)

This shows the component with real CRM data, accurate styling, and full interactivity.

Preview vs Code

Both tabs show the same component from different angles:

• Preview — visual rendering for quick layout and design checks
• Code — the generated source for review and understanding

Toggle between them as you iterate. Use the preview to check layout and visual structure, and the code tab to verify data bindings and logic.