Agentic Canvas is a full visual design tool. You select, resize, recolor, and rearrange directly, and every edit is real HTML and CSS underneath.
The window
- Top bar: Home, a tab for each open file, AI agents, light or dark mode, Variables, the zoom level, and Share.
- Left panel: Pages, with Add page, and Layers, which lists everything on the current page.
- Right panel: the inspector. It shows the properties of what you selected. With nothing selected it shows the page, including its Background color.
- Toolbar: the tools at the bottom of the canvas.
Tools
| Tool | Shortcut | Use it to |
|---|---|---|
| Move | V |
Select and move things |
| Scale | K |
Scale a selection |
| Frame | F |
Draw a frame, the container a design lives in |
| Rectangle | R |
Draw a rectangle |
| Shape tools | Draw other shapes | |
| Pen | P |
Draw a custom shape |
| Text | T |
Add text |
| Hand | H |
Pan around the canvas |
| Add to canvas | Add more content to the canvas |
Everyday edits
- Select a layer on the canvas or in Layers.
- Resize it by dragging its edges, or set its size in the inspector.
- Recolor it in the inspector.
- Rearrange by dragging on the canvas, or reorder in Layers.
Color variables
Choose Variables to define colors once and reuse them. Change a variable and everything that uses it follows.
Pages
A file can hold several pages. Use Add page in the Pages panel, and select a page to switch to it.
Questions and answers
Is this a real design tool or a code editor? A visual design tool. You work by selecting and dragging, and the canvas writes the HTML and CSS for you.
Where do I change a color? Select the layer and change it in the inspector on the right. For a color used in many places, use Variables.
Can I have more than one page in a file? Yes. Use Add page in the Pages panel.