Five steps, four of them drawn. Every figure below plays once as you reach it and stops on its last frame; ← and → walk any of them back, which are the extension's own keys for widening and narrowing a selection.
Click the toolbar icon and comment mode comes on with it. The pill in the bottom corner is the whole interface until you ask for more: its left part is the mode, its middle part opens the review panel, and its × 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 without Chrome asking for access again.
Hover and the box snaps to whatever is under the pointer. ← widens the selection to the ancestor and → narrows it back, so you can reach the card rather than the word inside it. A click opens the composer; Esc stops picking.
Hovering picks the element under the pointer, and the badge names it: the tag, and its role if it has one. Under the badge, the ladder is the chain of ancestors around it, widest on the left.
← widens the selection to the ancestor. The box grows to the whole list and the ladder moves the filled chip with it, so the chain says where in the page you now are.
← again reaches the card. The ladder offers six levels; above that the ancestor is a layout container that happens to enclose the thing you are pointing at.
Step 4 of 4. → narrows it back one level. A click at whatever level is selected opens the composer on that element, and Esc stops picking without opening anything.
A diagram of a page on a dev server with the extension's hover box around one element and a badge below it. Over four steps: the box is around a list item and the badge reads li, no role, with the ladder div.card, ul, li and the li chip filled; the left arrow key widens the box to the whole list and the ul chip fills instead; the left arrow again widens it to the card; and the right arrow narrows it back to the list. The hint line under the ladder reads: left arrow wider, right arrow narrower, click to comment, Esc to stop. Illustration, drawn on the grid from the extension's own .hover-box, .badge and .ladder. The page behind it is filler: the figure is about the overlay, not about a page it has reviewed.
The composer lists the element's own computed values. Pick one, type a new value, and the change shows on the page straight away — so the handoff carries padding-left: 12px → 16px instead of “this is too tight”.
┌─ localhost:<port> ───────────────────────────────────────────────────┐
│ │
│ ▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄▄ ┌────────────────────────────────────────┐ │
│ │ li · anchors by css-nth-child │ │
│ │ ┌────────────────────────────────────┐ │ │
│ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │ │ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │ │ │
│ │ │ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │ │ │
│ ▁▁▁▁▁▁▁▁▁▁▁▁▁▁ │ └────────────────────────────────────┘ │ │
│ │ ────────────────────────────────────── │ │
│ ▁▁▁▁▁▁▁▁▁▁▁▁ │ Or set the value you want, and see it │ │
│ │ padding-left 12px → 16px × │ │
│ │ [ padding-left ] [ 16px ] [Set] │ │
│ │ │ │
│ │ screenshot is taken at export │ │
│ │ [Cancel] [ Save ] │ │
│ └────────────────────────────────────────┘ │
└──────────────────────────────────────────────────────────────────────┘
step 4 / 4
A click on the picked element opens the composer beside it. The menu under the textarea is not a list of properties this site chose: it is the element's own computed values, the same set the handoff reports for it, sorted.
What is wrong, in words. This much is already a comment worth saving — the value below is the optional half.
Pick padding-left and the field fills with what is rendering now, 12px, so you edit a value rather than recall its syntax.
Step 4 of 4. Set puts 16px on the page and the row records the pair. The handoff then carries padding-left: 12px → 16px rather than “this is too tight”, which is the difference between the session diagnosing your complaint and locating it.
A diagram of the extension's composer open beside an element on a page. Over four steps: the composer opens with an empty box reading What is wrong with this, and a menu of the element's own computed values; a complaint is typed into the box; padding-left is picked from the menu and the field beside it fills with the value that is rendering, 12px; and pressing Set changes it to 16px, which moves the line on the page and adds the row padding-left, 12px arrow 16px, to the composer. Illustration, drawn on the grid from the extension's own .composer and .fix-row. The preview comes off the page when the composer closes — nothing is ever written to the page — and a correction still needs words next to it, because a value alone cannot say why it is wrong.
Esc backs out one layer per press: the composer first, then comment mode, then the panel. Turning the mode off is what takes the pins off the page and gives it back its own clicks; the comments are kept either way.
Three layers up at once: the composer over the element, comment mode on, the panel open down the side.
One press closes the composer. Nothing else moves, and the draft it was holding is the only thing given up.
The second press turns comment mode off. That takes the pins off the page and gives the page back its own clicks; the comments are kept.
Step 4 of 4. The third shuts the panel. Three presses back out three layers, and no press ever takes more than the one it is on.
Three rows — composer, comment mode, panel — each marked with a filled or hollow dot. Over four steps: all three are up; the first Esc closes the composer; the second turns comment mode off; the third shuts the panel. Illustration, drawn from the extension's own back-out order. A reload comes back quiet — mode off, panel shut, the set intact behind the pill.
Finish review writes visualedit-<timestamp>/ into your downloads: one handoff.md, and one shot-NN.png per anchored comment. That is the end of the pass — nothing is uploaded, and the one permission the extension asks Chrome for is to manage your downloads.
Finish review writes a folder into your downloads directory. Nothing leaves the machine and nothing is uploaded: it is a download, the one permission the extension asks for.
The folder is named for the moment the pass was finished, so two passes over the same page never collide.
handoff.md is the artifact. Everything the receiving session needs is in this one file, including the instructions to it.
One shot-NN.png per anchored comment, numbered in comment order. A page-level note is attached to no element, so it has no screenshot — which is part of how the two are told apart.
Three anchored comments, three crops. This is a real folder: examples/usagefoundry-dreaming-page/ in the product repository, from a pass over a page on a dev server.
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/.
Comments made after a client-side route change — a Next.js or React Router navigation, where the URL changes without a page load — are filed under the pathname that last loaded, and the handoff will name that URL. Reload after navigating so they land on the right page.
┌─ per page ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┐