Editing — Style, AI, HTML, and inline text

The workbench gives you four ways to make changes, ordered from most surgical to most sweeping: inline text edit (double-click), quick actions (one-click tweaks), the 3-tab edit modal (Style / AI / HTML), and the chat panel (full-page changes). Pick the smallest tool that fits the change — you'll get faster, cheaper, and more predictable results.

Click-to-edit (the 3-tab modal)

Hover any element in the preview — you'll see a blue outline and the element's selector at the bottom. Click once to open the inline edit modal. The modal has three tabs:

Style tab

A visual properties panel for the most common CSS tweaks. No prompt-writing, no token spend — changes apply via inline style attributes the moment you adjust a control:

Color. Text color, background color, border color — color picker plus hex input.
Typography. Font size, weight (100–900), line height, letter spacing, text alignment.
Spacing. Padding (top / right / bottom / left), margin, sliders for quick experimentation.
Layout. Display (block / flex / grid / inline), gap, justify, align.
Border & effects. Border width, radius, box-shadow presets.

Click Save to commit. Clicking Cancel discards every change in the tab. Style tab edits are completely free — they don't call Claude.

AI tab

A free-text instruction box that calls Claude to rewrite just the selected element. Great for rewording copy, changing imagery direction, or restructuring a small block. Examples:

"Rewrite this headline to be more confident, max 10 words"
"Add a small star icon before each list item"
"Convert this paragraph to three bullet points"

Claude only sees the snippet you clicked plus the brief — it cannot accidentally touch the rest of the page. Cost is tiny (typically a few hundred tokens). The result streams back, you click Apply to commit.

HTML tab

The escape hatch — shows the full outerHTML of the selected element in a textarea. Edit anything: change attributes, swap an image source, add a class, restructure children, paste in a snippet from elsewhere. Click Save and your edit is spliced back into the page verbatim. No model call, no cost. Maximum element size is 16 KB.

Quick actions row

At the top of the inline edit modal sits a row of one-click quick actions for the most common tweaks. These edit the element instantly without opening any tab:

B / I / U — bold, italic, underline (toggles).
A− / A+ — decrease / increase font size by one step.
Lighter / Bolder — shift the font weight up or down.
Wrap in link — wrap the element in an anchor (disabled if it's already inside one).
Duplicate — clone the element and place the copy directly after it (any id on the duplicate is stripped automatically to keep the page valid).
Delete — remove the element entirely.

Quick actions are free and reversible — every one creates a history entry, so Cmd+Z (or the history drawer) gets you back instantly.

Selector breadcrumb

Sometimes the element you actually want to edit is the parent of what you clicked — for example, you wanted the card, but you hit the heading inside it. The breadcrumb at the top of the modal shows the DOM path from body down to the current element. Click any step in the path to switch the modal's selection up to that ancestor. The Style / AI / HTML tabs re-read the new element instantly.

Inline text editing (double-click)

For pure text changes — fix a typo, reword a sentence — you don't need the modal at all. Double-click any text in the preview. The element gets a green outline and becomes editable in place. Type your changes, then click outside or press Esc to commit. Saves automatically; no modal, no tabs, no cost.

If the element is too large (more than 16 KB of HTML) the inline editor refuses with a small toast — open the regular edit modal and use the HTML tab instead.

Cmd+Z / undo

Every meaningful edit — chat turn, inline edit, quick action, inline text commit, code-panel save — captures a revision. Press Cmd+Z (Mac) or Ctrl+Z (Windows / Linux) to step backward through history. Or click Undo in the top bar to open the full history drawer, where each entry is labelled ( "Edited <h1>", "Hand-edited <section>", "Chat: add pricing block", etc.) so you can jump straight to a known good state. Undo is non-destructive — restoring an old revision creates a new one on top of the stack, so nothing is ever lost.

Tips

For one or two attribute tweaks, Style tab is faster than asking Claude.
For copy rewrites and imagery changes, AI tab beats hand-editing.
When you know exactly the markup you want, HTML tab is fastest of all.
For changes that span multiple elements (e.g. "make the whole hero darker"), use the chat panel instead — element edits won't see siblings.
If you click an element and the wrong thing is selected, check the breadcrumb at the top of the modal — one click moves you up the DOM tree.