Canvas
Canvas is a visual web page builder inside your workspace. Describe what you want, and AI generates it. Then refine your design visually, edit the code directly, or keep prompting until it's right.
Getting Started
Open Canvas
Press Cmd+7 (Mac) or Ctrl+7 (Windows/Linux), or go to View → Canvas.
Create a Project
Click Create Project from the project list. Each canvas project is independent and stored separately from your main codebase.
Describe Your Design
Type a description in the prompt bar at the bottom (e.g., "A landing page for a coffee shop with a hero section, menu, and contact form"), select your preferred AI model, and press Enter.
The AI follows a built-in design system to avoid generic-looking output — expect thoughtful typography, spacing, and color choices out of the box.
Live Preview
The center of the screen shows a live preview of your design. Switch between device sizes to check responsiveness:
| View | Description |
|---|---|
| Desktop | Full-width preview |
| Tablet | Medium-width preview |
| Mobile | 375px-width preview |
Design Mode
Toggle Design Mode to interact directly with elements on the page:
- Click an element to select it and view its properties
- Drag an element to reposition it
- Resize using the corner handles
- Double-click text to edit it inline
When you select an element, a floating toolbar appears with quick styling options for color, typography, font size, alignment, border radius, padding, and deletion.
Element Inspector
The right-side panel shows detailed properties for the selected element:
| Property | Controls |
|---|---|
| Text | Content editing |
| Font | Size, color, weight, style, alignment |
| Background | Color |
| Spacing | Padding and margin |
| Border | Radius, width, color |
| Size | Width and height |
| Opacity | Transparency |
Changes apply instantly to the live preview.
Code Panel
Click the Code button in the toolbar to open the code editor. Your project files are organized as tabs (.html, .css, .js). You can edit any file directly — changes save automatically and reflect in the preview immediately.
Refining with AI
You don't have to get everything right in one prompt. Keep using the prompt bar to iterate:
- "Make the hero section taller and add a background image placeholder"
- "Change the color scheme to dark mode"
- "Add a pricing section with three tiers"
- "Make the navigation sticky"
The AI reads your existing files and makes targeted edits rather than regenerating everything from scratch. Click the Stop button to cancel mid-generation if needed.
Version History
Canvas automatically saves a snapshot before every AI generation, so you can always go back.
- View history — Click the History button in the toolbar to see all snapshots with timestamps
- Restore a version — Click any snapshot to restore. Canvas creates a "Before restore" snapshot first, so you can undo the restore
- Delete snapshots — Remove snapshots you no longer need from the history panel
Build
When your design is ready, click the Build button in the toolbar. This exports your canvas files and sends them to the AI agent in your main workspace. The agent then implements the design using your project's actual framework and tech stack — turning your visual prototype into production code.
Start broad, then refine. Give a general description first, then use follow-up prompts to tweak specific sections. Use Design Mode for quick visual tweaks and the Code Panel when you need precise control.