The workspace

Editor runs as a local process and opens in your browser. The page you land on has three parts: your prototype running live on the left, a rail of panels on the right, and a header of git and project controls across the top.

The default address is http://127.0.0.1:4321. The CLI opens it for you unless you passed --no-open, and --shell-port <n> moves it. If 4321 is already taken (a second instance, usually), the CLI falls back to an OS-picked free port rather than failing, so read the URL it prints instead of assuming. See Quickstart for how to start the CLI in the first place.

The one thing to learn first: the tool picker#

The prototype on the left is a real, running app. A click on it can mean different things, and a three-way picker in the floating toolbar under the header decides which. There used to be a switch labelled Inspect beside a separate Comment button; both were replaced 2026-08-14 by one picker with three tools: Navigate, Select, and Comment.

• Navigate (the default at startup): the prototype behaves normally. Links navigate, buttons fire, forms accept typing. Use this to walk to the screen and the state you want to work on.
• Select: clicks stop reaching the app and start selecting. Hovering outlines what is under the cursor, clicking selects it into the Inspector, and right-clicking opens a per-element menu.
• Comment: your next click places a comment pin instead of touching the app or selecting anything. See Comments.

If clicking a button in your prototype "does nothing", Select or Comment is picked. If clicking an element fails to select it, Navigate is picked. This is the single most common first-run confusion.

Note Switching tools does not clear your selection or discard anything. Switch freely: navigate with Navigate, edit with Select.

Select also enables the direct-manipulation overlays inside the prototype: drag an element to a new position, and the row/column edge handles on tables. Drag-to-resize is built but deliberately switched off today.

The floating toolbar#

A small cluster hangs off the bottom edge of the header, centred over the prototype: the tool picker, Undo, Redo, then Breakpoint.

Navigate / Select / Comment is the tool picker from the previous section.

Undo / Redo live here too, not in the header. These undo Editor's edits, not git operations: each step restores the exact bytes of every file that edit touched. If a file has changed on disk since the step was recorded, the step refuses rather than applying a partial undo, and offers to discard itself so the stack does not jam.

Warning The undo stack lives in the running CLI process. It holds at most 50 steps (or 20 MB of file content, whichever comes first) and is gone when you stop the CLI. Commit anything you want to keep.

Breakpoint (the magnifier icon) forces the preview to a fixed width so your prototype's own responsive CSS renders at that size:

Option	Preview width
Auto	Fills the available pane
sm	640px
md	768px
lg	1024px
xl	1280px
2xl	1536px

These are the Tailwind default breakpoint minimums. Picking one constrains the preview to exactly that width (not just a maximum), so the media queries actually fire. The pane scrolls sideways if the chosen width is wider than the space available. The Inspector's style controls read and write the classes for whichever breakpoint is active.

An Editor/Canvas view switcher and a "Screenshot → canvas" button also live here, but the canvas surface is off by default and the controls stay hidden with it.

The header#

Left to right:

Breadcrumb: home › project ▾ › branch ▾. The home icon returns to the project picker. The project segment opens a menu with Open in viewer, Copy project link, and Connect to viewer… (the first two are disabled until the project is linked to a Viewer). The branch segment lists your git branches: pick one to switch, or use New branch from <default>, Duplicate current branch, Rename current branch…, and Publish to <default>… (the last appears only when you are not already on the default branch).

Commit. Runs the equivalent of git add -A && git commit on the checked-out branch, with an optional message. The button shows the number of changed files and is disabled when your working tree is clean. Editor writes every edit straight into your working tree as an ordinary uncommitted change: Commit is the boundary where those changes become git history. See branch mode.

When an edit needs the AI lane before it can reach source, the Commit button is replaced by Apply N with AI until you flush the queue. This is deliberate: committing first would leave those edits out. See Editing.

Merge / Push. A dropdown of the "send this branch somewhere" actions. Each item is self-disabling and its subtitle doubles as the reason it is unavailable:

• Push branch: commits pending edits, then git push origin <branch> using your own git credentials.
• Merge & push to <default>: squash-merges into the default branch locally, then pushes the default branch.
• Merge to local <default>: squash-merges locally only. GitHub is untouched.
• Open pull request: opens a dialog with a title field and creates the pull request through your own gh CLI. Disabled in two cases, each named in its own subtitle: you are on the default branch (switch to another branch first), or the repository has no origin remote.

You stay on your own branch after either merge.

Editor settings (the ⋮ button). What lives here: Anthropic API key (paste a key instead of using a Claude subscription), Model & references (a read-only view of the repo files the AI tiers are grounded in: CLAUDE.md, AGENTS.md, and similar), Extensions… (MCP servers from .mcp.json), Design systems (the component libraries Editor grounds the agent in, plus adding a detected library, an npm package, or a git repo), Reference folders (extra directories the agent may read), Your viewer (the machine-level Viewer URL and token), and Share for review… (labelled Viewer once one is connected).

Hide chrome. Hides the header, the toolbar and the right rail so the prototype fills the window. A single button in the top-right corner brings everything back.

The right rail#

Four tabs: Edit, Chat, Comments, Activity. Drag the rail's left edge to resize it; the width is remembered.

Edit holds the structure tree at the top. With nothing selected, the tree fills the tab. Select an element and the tab splits: tree above, Inspector below. The divider between them is draggable. See Select and inspect.

Chat is the agent conversation, with a tab strip for parallel chat sessions. See Chat.

Comments holds comments on your prototype. It can also hold notes, a related but dormant feature that is off by default. Clicking a pin inside the prototype switches to this tab automatically. See Comments.

Activity is one newest-first list mixing edits the Editor made with any other uncommitted change in your working tree, each with its own verification result and a per-row Undo. There is no per-file Discard control any more; see the git workflow for what replaced it. Committing empties the list.

Where messages appear#

Status, failure and connection messages appear as toasts in the bottom-left corner rather than as banners. That includes the bridge connection state: if the toast says the bridge connection failed, Editor cannot see inside the prototype and nothing will select.

Next#

• Select and inspect: what a selection gives you
• Editing: text, props, styles and structure
• Limits: what Editor refuses, and why