Inspect Mode

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
  • !important flags 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, and console.info calls 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.