Canvas Inspector

The Canvas Inspector is the right panel of the build interface. It shows a live preview of your application, the file tree, and component details.

Live Preview

The preview pane renders your application in a sandboxed WebContainer (in-browser Node.js runtime). Changes appear in near-real time — typically within 2-3 seconds of a file being written. You can interact with the preview directly: click buttons, fill forms, navigate routes.

Controls: Reload button forces a hard reload. Open in tab opens the preview in a full browser tab. Device toggle switches between desktop (1280px), tablet (768px), and mobile (375px).

File Tree

Shows every file in the current project. Files modified in the current session are marked with a dot. Click any file to open it in the code viewer.

Code Viewer

Read-only during active builds. When the agent is idle, you can edit files directly.

Inspector Panel

Click any visible element in the preview to open the Inspector. It shows the component name, file path, applied Tailwind classes, and an Edit this shortcut that pre-fills the chat with a targeted edit prompt.