Canvas
The canvas is a zoomable infinite workspace. It shows your app as a live preview with responsive breakpoints, so you can see how it looks at different screen sizes.
Switch breakpoints to preview responsive behavior
What You See
The canvas displays your app as it will appear to users. Click any element to select it:
- Components — Reusable pieces like buttons, cards, and forms
- Layouts — Page structure elements like headers, footers, and navigation
- Sections — Content areas like hero, features, and testimonials
Interacting with the Canvas
Click to Select
Click any element to select it. The selected element is highlighted with a border.
Pan and Zoom
Drag to pan around. Use scroll or pinch to zoom in and out.
Breakpoints
Switch between desktop, tablet, and mobile views to see how your app responds.
Making Edits
There are two ways to edit your app:
Chat (Recommended)
Describe what you want to change in natural language. The AI will update the code for you.
Direct Edit
Double-click an element to edit its text directly. Good for quick text changes.
Element Tree
The left sidebar shows your project files. Click a page to load it in the canvas.
Tips
- Select an element before chatting to tell the AI exactly what to modify.
- Use keyboard shortcuts: Escape to deselect, Delete to remove selected element.
- Right-click elements for quick actions like duplicate, delete, or wrap in component.