CodewithChat LogoCodewithChat
DocsBuilding & IterationVisual Design Mode & Element Inspector
Building & Iteration• Canvas Inspector v2

Visual Design Mode & Element Inspector

Click any element on your live canvas to inspect, tweak, and prompt modifications visually.

Click-to-Prompt Visual Inspector

Activate "Inspect Mode" on the preview toolbar and click on any UI element (heading, card, button). CodewithChat highlights the underlying component file and focuses your prompt directly on that element.

Responsive Viewport Modes

Test how your application behaves across Mobile (375px), Tablet (768px), and Desktop (1440px) viewports with one click on the top canvas toolbar.

Live Light / Dark Mode Previews

Toggle between dark and light themes dynamically to ensure high contrast, readability, and consistent brand aesthetic.

Ready to build your first website or web app?

Start with your idea and let the AI mentor guide you step-by-step from an empty folder to a successful launch.

Start Building Now

Command Palette

Search for a command to run...