Inspect Mode
CSS inspector
Inspect Mode is a built-in CSS inspector similar to Chrome DevTools. Enable it via the Inspect toggle in the header (desktop only, Pro/Max plan). The IDE splits into a live preview on the left and an inspector panel on the right.
Click any element in the preview to select it. The inspector shows its full DOM tree path, computed styles, and all matched CSS rules.
Editing styles
In the inspector panel, double-click any CSS property value to edit it inline. Changes apply live to the preview. Right-click a property for copy/delete options. Click the selector to rename it.
- Toggle individual CSS properties on/off with the checkbox beside each rule
- Shorthand properties (margin, padding, font, border) are expanded for precise control
!importantflags are shown and preserved when editing
Console & Scripts tabs
The inspector panel has two additional tabs:
- Console — automatically captures all
console.log,console.warn,console.error, andconsole.infocalls from your running app - Scripts — lists all scripts loaded by your app. Click any script to view its source or run it in context
NoteInspect Mode edits are applied to the live preview but are not automatically saved to your source files. Use the AI assistant to convert your style changes into source code.