Radial app
Editing & canvas tools
The preview is a canvas with tools, like a design app pointed at your real site. Small edits (text, links, images) are written straight back to source; everything bigger is one click away from becoming an agent task with perfect context.
The tools
Switch tools from the canvas toolbar or with single keys (they work any time you're not typing):
| Key | Tool | What it does |
|---|---|---|
| V | Browse | The site behaves like a normal browser. |
| S | Select | Click elements to hand them to the agent. |
| T | Text | Edit text and swap images inline (also ⌘E). |
| C | Comment | Pin comments to elements. See Client review. |
| I | Inspect | Read an element's font, color, and box styles. |
| D | Draw | Annotate a screenshot for the agent. |
In Select, Comment, and Inspect, hold ⌘ to drill into nested or covered elements, the way it works in Figma.
Select: point at what you mean
Click an element and a small pill appears under it. Type what you want changed ("make this shorter", "swap this section to a two-column layout") and press Enter: the ask goes to a terminal agent along with the element's exact selector, text, and page, so there's no describing where things are. ⌘Enter moves it into the agent terminal instead, for longer asks.
- ⇧-click more elements while the pill is open to include several at once. A plain click replaces the selection.
- The ↑ button on the pill (or ↑ over the canvas) selects the element's parent, for when the card you want is buried under the headline you can actually hit. ↓ walks back down the same path.
- Delete removes the selected element: it disappears immediately and the agent takes it out of the source.
- Double-click text to jump straight into the Text tool and edit it inline.
Adjust: nudge the values
With one element selected, the pill grows a row of steppers: padding or margin per side, text size and weight, gap on flex and grid containers, corner radius on anything with a visible box, and alignment. Steps snap to the site's own scales (text sizes come from what the page already renders), so a nudge always lands on something the design already does. Click the number to type an exact value instead.
Every nudge previews instantly without touching source, and Esc puts everything back. Enter hands the batch to the agent, which writes it in your project's own idiom (a Tailwind class, a CSS variable, plain CSS). Radial saves a checkpoint first, so the chip that appears can undo the whole batch in one click, and the same checkpoint stays in Version history after the chip is gone.
Text: edit in place
Click any text and the caret lands where you clicked; select a word and type over it, like a document. Press Enter and Radial finds that exact text in your repo and rewrites it in place, using the element's DOM context to pick the right occurrence when the same words appear more than once. Esc cancels.
- Links: hover a link for an Edit link badge to change its destination.
- Images: click an image to swap it for a local file.
Inspect: read the design
Hover to see a floating readout of the element's font family, size and line height, weight, letter spacing, color (as hex), padding, margin, and rendered size. Click to pin it, then click any value to copy it.
Draw: mark up a screenshot
Scribble, box, arrow, or type text over the live preview in marker red, then send: Radial composites your marks onto a capture and hands it to the agent. "This spacing, this alignment" becomes something an agent can actually see.
The Move tool selects any mark to drag it, Backspace deletes it, and Clear wipes the canvas without leaving the mode. Copy puts the annotated screenshot on your clipboard instead, ready for Slack or a doc, no agent involved.
Page settings
⌘⇧P opens a drawer showing the current page's
<head>: title, meta description, Open Graph,
Twitter, canonical, robots, favicon, and theme-color, each written
back to source when you save. The
Launch check audits the same
territory across every page at once.
Undo and history
⌘Z / ⌘⇧Z undo and redo individual edits. Every edit, agent run, and publish also becomes a restorable snapshot; see Version history.
What inline editing skips
The Text tool rewrites what it can locate with certainty and refuses to guess:
-
Interpolated text like
Welcome to {brand}is detected and skipped rather than mangled. - Content fetched at runtime from an external CMS isn't editable, only content that lives in the repo.
- Layout and styling changes are out of scope for inline editing.
In each of those cases Radial hands the change to the agent with full context instead of dead-ending. For bigger work, start from the Select tool or the terminal; see Agents & terminal.