Design mode gave you your app's design system. Element Mode gives you the elements themselves. Flip it on, click anything in your running app — a heading, a hero, a button — and work on that exact element: hand it to the agent with an instruction, drag it somewhere better, tune its type and color, or double-click and rewrite the text in place. Every change is written straight into your app's source, so what you touch is what ships.
Select anything
Enter Element Mode from the Edit pill on any app, the Element tool in the design dock, or just press D. Hover and click, and the element under your cursor gets proper selection chrome: a bounding box with eight resize handles, live width × height, and the element's name floating above it — the same grammar you know from design tools, on your real, running app.
The selection panel tells you exactly what you're holding: the component or
tag, and the precise place it lives in your code — h1 · landing.dc.html:12.
On documents, a breadcrumb in the dock walks the ancestor path
(body › section › h1), so climbing from a button to its section is one
click.
Send it to the agent
Every selection carries an instruction box. Tap one or more preset chips —
/simplify, /contrast, /spacious, /readable, /pop,
/hierarchy — or type your own instruction, hit ⏎, and it goes straight to
your agent. The agent doesn't get a vague description: it receives your
instruction together with the element's actual markup and its exact
file:line location, so "make this pop" lands on precisely the element you
clicked.
Prefer to bundle it into a bigger request? Add to chat attaches the element to your next message as a removable chip — select a pricing card, attach it, and write "make three variants of this" in your own words.
Edit text directly
Double-click any text element and it becomes editable in place. Type, hit Enter, done — the new copy is committed into the source file, not painted over it. A small toolbar handles bold, italic, and underline while you write.
Move things around
Drag the selected element and it follows your cursor at full frame rate; drop it and a single clean change lands in the source. Resize from any handle. Nudge with the arrow keys — one pixel at a time, ten with Shift. Duplicate an element with one tap and the copy is immediately selectable, ready to become the second card in the row.
Optimize the design
On documents, the selection also unlocks direct styling: font family and size, bold and italic, text alignment, and a full color picker — each control reads what the element actually declares in source and writes your change back to the same place. The design panel goes further and discovers the colors and fonts your document uses, scoping them to the selected element so you can retune one heading without touching the rest.
Sketch with wireframe blocks
The layout flyout carries a palette of wireframe blocks — navigation, header, hero, section, sidebar, footer, modal, banner — plus a one-tap wireframe for a whole new page. Drag a block onto the design and it drops exactly where you point; then select it and tell the agent what it should become. Blocking out a landing page and filling it in with instructions takes minutes.
Your edits are code
There's no overlay document and no hidden state. Every element carries a stable address into your source, and every Element Mode action — a text edit, a drag, a color change, a dropped wireframe — is a patch to the actual file:
Because the source is the store, the preview updates through an incremental morph — no reload, no flash, your deck stays on its slide and your animations keep playing. The dock counts your changes as you go, and undo, redo, and a one-tap clear walk them back cleanly. And since your agent reads and writes those same files, the loop closes: rough it in by hand, hand the selection to the agent to finish, and keep editing what comes back.
Element Mode works on documents and React apps alike — documents get the full toolkit including the format controls and wireframe palette, and on React apps you can select, instruct the agent, edit text, and move things around. You'll find it behind the Edit pill on any running app, starting today.