EditUICursor Visual Editor
Cursor's Visual Editor, when you are not in Cursor's browser
Cursor's Visual Editor is a strong way to manipulate a running page inside Cursor. EditUI is the point-and-note version of that job in normal Chrome, for any coding agent.
What Cursor's Visual Editor is
Cursor announced it as a visual editor for the Cursor Browser. The app, the codebase, and the editing controls sit in one window. You can drag rendered elements around the DOM, inspect component props in a sidebar, and adjust layout, color, and type with the controls there. You can also click something and describe the change in words: make this bigger, turn this red, swap their order. Cursor says those agent runs can proceed in parallel, and then the agent updates the underlying code.
That is more than a comment layer. The Visual Editor lets you try the layout with your hands, then ask Cursor's agent to make the code match. Design Mode is the neighboring feature: point, draw, or talk in the Agents Window browser, and Cursor's agent edits from that prompt. People search for both. They are related, and they are not the same control.
The gap
Both tools run in Cursor's browser. The agent that receives the click is Cursor's agent. If the page you care about is a normal Chrome tab, or the agent you trust today is Claude Code or Codex, you are outside that window.
The usual workaround is a sentence: "the card on the right, under the price, the one that feels too heavy." The agent guesses. You correct it. The bug was obvious on screen the whole time.
| Compared | Cursor Visual Editor | EditUI |
|---|---|---|
| Where it runs | The Cursor Browser, in the same window as the code. | Normal Chrome, including localhost. |
| How you edit | Drag layout, inspect props, tweak styles, and describe changes on a click. | Click an element and write the change. No drag handles and no style sidebar. |
| Who edits the code | Cursor's agent, after you ask it to apply the visual result. | Any agent you paste the prompt into. |
| Setup | Open the app in Cursor's browser. | Install the extension. Nothing goes in the repo. |
A pass outside Cursor's browser
Run the app. Open the same URL in Chrome, localhost included, at the width you are judging. Turn on EditUI with the toolbar icon or Command-Shift-E. Click the element that looks wrong and write the outcome: make this quieter, even these out, stack this on a narrow window. Leave the style sidebar work to Cursor. Your sentence plus the click is the whole instruction.
Do not send each note as its own prompt. The Visual Editor can fire several agent runs while you keep clicking. EditUI waits until the review is finished, then Copy all produces one prompt. Paste it into Cursor if that is the agent you want, or into Claude Code or Codex if it is not. When the page reloads, check the same elements. The notes that missed get a shorter follow-up. The ones that landed stay done.
The EditUI path
Open the same localhost URL, or any other page, in Chrome. Turn on EditUI. Click the element and write the outcome, not a tour of the stylesheet. Keep going until the pass is done. Copy all. Paste the prompt into the agent that has the repository.
The prompt carries the URL, the viewport, each note, and DOM context for the elements you clicked: tag, text, nearby markup, and a short list of computed styles. It does not drag elements, expose React props, or attach a screenshot. You are not visually rearranging the page inside the browser. You are naming what should change, in a batch, and letting the agent edit the code.
There is no MCP server. Nothing is added to the project. The same clipboard works if you switch agents tomorrow. A longer version of the batch idea is on the batch UI edits page.
Stay in Cursor's Visual Editor when
- You want to drag the layout and see it before any code changes.
- You want props and style controls next to the running page.
- Cursor is the agent that will write the code, and the page is already in its browser.
- You want several of those prompts running without a paste step.
Use EditUI when
- The review is happening in normal Chrome.
- You want one batch of notes, then one paste.
- The agent is Claude Code, Codex, or another tool.
- You do not want the review tied to Cursor's browser.
EditUI will not replace the Visual Editor's direct manipulation. If the job is "nudge this until it looks right, then apply," stay in Cursor. If the job is "I can see six things that are wrong, and I need the agent to know which elements I mean," point at them in Chrome and paste the list.
Add to Chrome