Skip to content

chrome extension your dev server not listed yet

VisualEdit

Point at what is wrong on a running page; it writes a handoff folder a coding agent can act on.

A review pass is: click the toolbar icon, hover to pick the element, type what is wrong, finish. What lands in your downloads is a folder — one handoff.md and one shot-NN.png per anchored comment — that you move into the repository it is about and point a coding session at.

one pass

Pick, say what is wrong, finish

Pick the element, not the paragraph

Hover to select, and to widen or narrow the selection, click to write what is wrong. Esc stops picking.

Nothing is captured while comment mode is off, and turning it off gives the page back its own clicks.

Say what the value should be

The composer lists the element's own computed values; pick one, type a new value, and it shows on the page straight away.

The preview comes off when the composer closes — nothing is written to the page — and a correction still needs words beside it, because a value alone cannot say why it is wrong.

Finish the pass, get a folder

visualedit-<timestamp>/ lands in your downloads: one handoff.md, and one shot-NN.png per anchored comment.

One folder per page. Reviewing five pages gives five handoffs, not one combined pass.

It never claims a source file

The browser cannot see source, so the handoff carries evidence about the rendered element and the instruction to report a comment as unlocated rather than edit a file the session is not confident about.

React 19 removed _debugSource, and Next's open-in-editor path maps stack frames rather than DOM nodes. The finding is in docs/evidence/anchoring/.

the interface

The pill is the whole interface until you ask for more

One capsule in the bottom corner, in three parts: comment mode on the left, the review panel in the middle, an × on the right. That × takes VisualEdit off this site and keeps it off across reloads and browser restarts; the comments are kept, and the toolbar icon turns it back on. Esc backs out one layer per press, and a reload comes back quiet — mode off, panel shut, the set intact behind the pill.

Step 5 of 5. The × in the panel header closes it again without touching comment mode. The pill comes back exactly as it was: still on, still holding three. The × on the pill is the other one, and that turns VisualEdit off on the site.

A diagram of a page on a dev server with the VisualEdit pill in its bottom corner. The pill is one capsule in three parts: comment mode on the left, the review panel and its comment count in the middle, and an × on the right that turns VisualEdit off on the site. Over five steps: comment mode is off and the pill's dot is hollow; the left part turns the mode on and the dot fills; three pins appear on the page and the middle part carries the count; that middle part opens the review panel down the right-hand third of the window, which hides the pill because it covers the same corner; and closing the panel with the × in its own header brings the pill back with comment mode still on and the three comments still counted. Illustration, drawn on the grid from the extension's own .pill and .panel. The three comments are the illustration's; the product states no such number.

the artifact

The pass ends in a folder

handoff.md is the single source of truth and there is deliberately no JSON copy inside it: the file you read is the file the session acts on. A second encoding desyncs the moment somebody corrects a comment by hand.

Step 6 of 6. The head of the file says which page, at what size, and when. Below it come the instructions to the session and then one section per comment — the evidence about the rendered element, never a source path.

A folder in the downloads directory, drawn line by line over six steps: visualedit-<timestamp>/, then handoff.md, then shot-01.png, then shot-02.png and shot-03.png. The last step opens handoff.md on its first nine lines — the title, the schema version, the capture time, the page URL, the page title, the viewport, the device pixel ratio and the scroll position at capture. Move the folder into the repository it is about and point a session at handoff.md. The instructions travel inside the file, so no prompt is needed beyond naming it. Drawn from a real pass: examples/usagefoundry-dreaming-page/.

Every step between turning it on and finishing is on /visualedit/how-it-works.

install

Only from the Chrome Web Store

That is the only way it is distributed: nothing to build, nothing to download from this site, no other path. It is not listed there yet, so there is nothing here to click — the button appears on the install page the day the listing is public, and the rest of that page is true now.

Version 1.0.0. Chrome 120 or newer.

Only http: and https: pages can be reviewed. localhost and 127.0.0.1 on any port keep their access across reloads; everywhere else it works one page load at a time, unless you grant that site yourself from Chrome's own menu.

Chrome asks for one permission when you add it, to manage your downloads. Site access is a separate question, asked the first time you use it on a page.