Features

Code Panel

The inspector's top section. Edit a node's raw className and inline style with autocomplete, conflict warnings, and color swatches. A designer-friendly nudge into Tailwind and CSS without leaving the structured controls below.

Always at the top

The Code panel renders as the first section in the inspector, collapsed by default. Power users find it instantly; novices ignore it until they need it.

Two editors, side by side

The Code panel has two editors, each powered by CodeMirror 6:

className — plain mode with a custom completion source for Tailwind classes.
style — CSS mode with built-in property and value completions.

Edits commit on blur. The full pre-edit snapshot is saved on focus so a concurrent change from the AI agent or an undo isn't reverted when you click away without typing.

Tailwind autocomplete

~2000 Tailwind utility classes are suggested as you type. Color classes (bg-*, text-*, border-*, ring-*, outline-*, divide-*, shadow-*, from/via/to-*, fill-*, stroke-*, accent-*, caret-*, decoration-*) render with a small colored dot resolved from Tailwind's default palette.

Variant prefixes are composed at suggestion time. Type sm:bg-r and the popup filters from the bg-r portion, then composes sm:bg-red-500 on accept. Supported variants: sm, md, lg, xl, 2xl, hover, focus, focus-visible, focus-within, active, disabled, visited, checked, dark, group-hover, group-focus, peer-hover, peer-focus, first, last, odd, even, rtl, ltr, print.

Conflict warnings

Inline style wins over a single Tailwind class in CSS specificity. When you have both — e.g. bg-red-500 in className and background-color: blue in style — the panel warns in two places:

An amber strip under the style editor lists each conflicting CSS property and shows the winning inline value.
A small <> icon appears next to the affected structured Section header (Fill, Size, Typography) with a hover tooltip pointing back to the Code panel.

Arbitrary tokens don't conflict

Tailwind classes like p-[12px] and bg-[#abc]dual-write into inline style by design — they don't trigger the conflict warning. border-radius and background-image are also excluded because inline IS the source of truth for those.

Multi-line values, data URIs, comments

The style parser is paren-aware so multi-line transforms, data URIs with semicolons, and block comments all survive a round-trip:

css

transform: rotate(45deg)
  translate(10px, 0);
background-image: url(data:image/png;base64,iVBORw0=);
/* primary surface */
background-color: #ff00aa;

Insertion order is preserved across blur so grouping related declarations sticks. Property names are lowercased; empty values are dropped.

Live-sync with external writes

If an AI agent (or undo, or a tool call) edits the same node while the Code panel has focus, the new value appears live in the editor — provided the user hasn't typed since the last push. The local typing branch always wins, so an in-progress edit is never clobbered.