Skip to content
EditUI
Menu

Chrome extension

Edit UI directly from Chrome

Point at any element on your running website, describe the change, and send the context to your coding agent.

Add to Chrome

The workflow

  1. 01

    Run your app

    Use the site you already have open. Localhost is fine.

  2. 02

    Turn on Edit Mode

    Click the toolbar icon, or press Command-Shift-E (Ctrl-Shift-E).

  3. 03

    Click and write

    Select an element and describe the change. Add as many as you need.

  4. 04

    Copy all

    One prompt leaves with the page, the elements, and your notes. Paste it into your agent.

Works on your existing app

No special browser or visual builder. Review the page that is already running.

No repo setup

Install the extension and start pointing. There is nothing to add to the project.

Batch your edits

Review an entire page before involving your agent, then copy the batch once.

Agent agnostic

Claude Code, Cursor, Codex, or the clipboard. The prompt is plain text.

What you copy

Copy all builds one prompt: the URL, the viewport, each request, and the DOM context for the elements you clicked.

Copied prompt
I reviewed the UI at:

`https://usercall.com/`

Viewport: 1440×900

Please implement the following 3 UI changes while preserving the existing design system and responsive behavior.

## Edit 1 — Customer interviews, without the calendar chase

**Request:**
Make this heading slightly smaller.

**Selected element:**
`<h1 class="hero-title">`

**Text:**
Customer interviews, without the calendar chase

**Bounds:**
96, 128, 640×112

**DOM context:**
<section class="hero">
<h1 class="hero-title">Customer interviews, without the calendar chase</h1>
after: <p>A running app, reviewed in Chrome.</p>
styles: display: block; font-size: 60px; font-weight: 500; line-height: 64px

## Edit 2 — Schedule Capture Share

**Request:**
Make these equal height.

## Edit 3 — Book a research call

**Request:**
This feels too prominent. Make it secondary.

Implement all requested changes, then review the resulting page against each edit.

Install

The Chrome Web Store listing is the install path once it is published. Until that URL is set, load the extension from a local build.

  1. From the repo, run pnpm install and pnpm dev.
  2. Open chrome://extensions and turn on Developer mode.
  3. Load unpacked and choose .output/chrome-mv3.
  4. Open your app, click the EditUI icon, and start a review.

Privacy

Your code stays your code. Page context is processed locally by the extension. EditUI has no account and no server. The content script stays inactive until you turn Edit Mode on.

Privacy policy

Questions

Does EditUI upload the page?
No. Page context is processed locally by the extension. Notes stay in chrome.storage.local on your device. They leave the browser only when you press Copy all and paste the prompt into a tool you choose. No account is required.
Do I need to connect a repository?
No. Install the extension and start pointing. EditUI does not read your repo and does not edit source files. Your coding agent does that after you paste the prompt.
Which agents does it work with?
Any agent that can take a pasted prompt, including Claude Code, Cursor, and Codex. EditUI copies the review. It does not install itself into the agent.
What does the extension store?
The URL, viewport, and the elements you select: tag, visible text, classes, a short attribute list, nearby markup, a small set of computed styles, and the bounding box. Uninstalling the extension removes those notes.