Design Canvas
Browse every page of your app side-by-side on an infinite canvas.
Overview
The Design tab on the right panel renders every route of your app as a card on a pannable, zoomable canvas. Pinch or Cmd+scroll to zoom, scroll or drag to pan, and use the minimap to jump around. It's intended for visual scanning — see all your pages at once, click any element to attach a screenshot to your next prompt.
Cards measure their own height from the loaded page (document.documentElement.scrollHeight) so each card fills the page's natural extent rather than a fixed device viewport. Width is fixed at 1920px; cards stack horizontally with a 60px gap.
Generating coodeen.json
The canvas is driven by the design block in the project's coodeen.json file. If the file isn't present when you open the Design tab, the canvas shows a Generate design file button.
Clicking it sends a programmatic prompt into your current chat session (creating one if needed) asking the agent to scan the project, list user-facing routes, and write coodeen.json. The agent's reasoning streams in the chat as usual; meanwhile the app watches the file and refreshes the canvas the moment it lands on disk.
{
"design": {
"host": "http://localhost:3000",
"pages": [
{ "route": "/" },
{ "route": "/login" },
{ "route": "/dashboard" }
]
}
}You can hand-edit the file at any time — the watcher rebuilds the canvas live.
Modes
A three-way toggle in the canvas top-left controls how mouse events are routed:
| Mode | Behavior |
|---|---|
| Preview (default) | Pages are visual only; the canvas owns pan, zoom, and drag everywhere. |
| Interact | Clicks are forwarded to the page (links, buttons) and the card refreshes afterwards. Typing into page inputs isn't supported. |
| Select | Hover highlights elements inside any page with a selector tooltip; click captures a screenshot of the element and attaches it to the chat composer. Mode auto-resets to Preview after a successful pick. |
Cards themselves are not draggable — positions are derived from page order.
Performance
Each page loads once in an offscreen web view and is drawn on the canvas as a snapshot, so zooming and panning stay smooth with many pages. Snapshots refresh after the page loads, after interactions, and when you click the reload button on a card or in the zoom controls.
Caveats
- Heights are capped at 10000px to prevent runaway layouts.
- Pages with
100vh-only content can report a viewport-sized height; if you need a card sized to actual content extent, give the page a real document height.