How to Use EditUI: The Beginner's Guide (First Install, the First Click, the Batch Lesson, and the One-Prompt Arc)
CodexFuse Team · 2026-11-02T17:35:04.869Z · 13 min read min read
EditUI is a free, open-source Chrome extension by Usercall that turns pointed-at UI feedback into one structured prompt for Claude Code, Cursor, or Codex. This beginner's guide covers install, Edit Mode, the batch workflow, privacy, and common mistakes.
Learning how to use EditUI takes about ten minutes, and it fixes one of the most annoying loops in modern web development: typing long paragraphs to a coding agent describing a UI change you can already see. EditUI is a free, open-source Chrome extension, made by Usercall and launched on Product Hunt on October 13, 2026, that lets you click any live element in your browser, write the change you want, collect your notes into one batch, and paste a single structured prompt into Claude Code, Cursor, or Codex. No account, no repo setup, no MCP server. This editui tutorial walks the whole arc: installing it, your first click, the batch lesson, the one-prompt handoff, and the privacy rules worth knowing. If the agents themselves are new to you, our Claude Code beginner guide is the right place to start.
What Is EditUI, Exactly?
EditUI is a free, open-source Chrome extension for collecting UI feedback as agent-ready prompts — point-and-click feedback for coding agents: no screenshots to annotate, no selectors to copy, no source files to hunt down. You turn on Edit Mode, click live elements on any web page, and write short change notes. The extension bundles every note — with each element's text, DOM context, classes, parent, nearby elements, URL, viewport, and computed styles — into one structured prompt you paste into Claude Code, Cursor, Codex, or anywhere else that takes text.
The maker's whole philosophy fits in one sentence from the README: "You can see the UI bug, and the agent cannot, so stop describing which element." EditUI does not change your code for you. It does the part the agent is bad at — knowing exactly which element you mean — so you stop writing paragraphs like "the third card in the second row, no, the one below the hero."
Why Does Describing a UI Change to an Agent Fail Without It?
Because the agent never sees your screen. When you type "make the CTA quieter," the agent has to guess which button you mean, on which page, at which viewport size. Every wrong guess costs a round trip, and round trips are where agents waste the most time.
Pointing is simply higher-bandwidth than describing. One click says "this exact element, on this page, at this viewport, with these styles" — information that would take five sentences to type and still leave room for misreading. That is the entire mental model behind EditUI: point at the problem instead of narrating it.
The four-step loop the extension is built around — Point, Prompt, Collect, Send — mirrors how designers already review work. You point at the thing, say what you want, keep a running list, and hand the whole list over once. The only twist is that the recipient is an agent instead of a teammate.
How Do You Install EditUI, Step by Step?
Install takes about two minutes. The project's README offers two paths: a one-click store install for regular users, and a build-from-source path for developers who want the latest code.
- Get the extension. The fastest EditUI Chrome install is the one-click path: on the junetic/editui repository, click "Add EditUI to Chrome" to open the Chrome Web Store listing, or "Add EditUI to Firefox" for the Mozilla add-on page. It is free with no signup.
- Pin the toolbar icon. Pin EditUI to your toolbar so the toggle is always one click away.
- Open your app in a normal tab. EditUI works on the live page you are looking at — your localhost dev server, a staging URL, anything rendered in the tab.
- Toggle Edit Mode. Press Command-Shift-E on macOS or Ctrl-Shift-E on Windows and Linux, or click the toolbar icon. This is the extension's master switch.
- Click and note. Click any element and write the change you want. Keep reviewing — every note stays in the batch until you send it.
Prefer the developer path? The repo is public under the MIT license — created September 29, 2026, with 35 commits and 17 stars as of November 2, 2026 — and builds with Node.js 22 and pnpm 10: run pnpm install, then pnpm dev, and load output/chrome-mv3 at chrome://extensions as an unpacked extension. If you already keep your code in version control, our GitHub beginner guide covers forking the repo before you hack on it.
How Does the Point-Prompt-Collect-Send Loop Work?
The loop has four moves, and beginners should learn them in order. Point: turn on Edit Mode and click a live element. Prompt: write the change you want in plain words — "make this heading smaller" beats a paragraph. Collect: keep reviewing; every note stays in the batch. Send: copy the batch and paste it into Claude Code, Cursor, Codex, or anywhere else that takes text.
Each note you collect carries far more than your words. Per the project's site and privacy policy, a captured note includes the element's tag, visible text, classes, a short attribute list, a compact HTML snippet, parent and sibling markup, nearby elements, the page URL and title, the viewport size, computed styles, and the element's bounding box. You write one sentence; the agent receives a full evidence pack.
That evidence is what makes the generated prompt useful. Instead of pasting "make the CTA quieter" and hoping, you paste a structured note that says which element, on which page, with what current styles — the three things agents guess wrong most often.
What One Captured Note Carries
| Field | What the agent learns from it |
|---|---|
| Element tag + visible text | Which node you mean — a button labeled "Sign up," not a div somewhere |
| Classes + short attribute list | The hooks your CSS actually uses, so edits land in the right stylesheet |
| Compact HTML snippet | The element's real structure, not your memory of it |
| Parent + sibling markup | Layout context — the card lives inside this grid, beside these cards |
| Nearby elements | What surrounds the target, for alignment and spacing judgments |
| Page URL + title | Which page of the app the note belongs to |
| Viewport size | Whether "looks broken" means the mobile or desktop layout |
| Computed styles | The actual rendered CSS, including inherited and overridden rules |
| Bounding box | Where the element sits on the rendered page |
What Does a Finished Edit Batch Look Like?
A batch is just a tidy numbered list of plain-language notes, each one backed by the captured context above. The project's site shows a review tray with five collected edits — "Reduce hero height," "Align these cards," "Make this CTA secondary," "Tighten this spacing," "Stack these on mobile" — and a single "Send 5 edits" action.
Here is what a realistic first batch looks like after one review pass over a landing page:
- "Shrink the hero headline from 64px to 48px on desktop — it pushes the CTA below the fold."
- "The three pricing cards don't align at the top; the middle card's feature list is one line longer."
- "Make the secondary CTA an outline button instead of solid — it competes with the primary."
- "Tighten the section spacing between the features grid and the testimonial from 120px to 64px."
- "On a 390px viewport the nav links overflow; collapse them into the hamburger earlier."
Notice what you never typed: no selectors, no file paths, no hex codes, no "the div with class container-xyz." The batch is the whole review in five sentences, and it is the only thing you paste into the agent.
How Do You Send the Batch to Claude Code, Cursor, or Codex?
Press "Copy all" in the review tray, switch to your agent, and paste. The batch is plain text, so it works with Claude Code, Cursor, and Codex — the three agents the README names — plus Windsurf, which the project's site lists under "works with the agent you already use," and anywhere else that takes text, including a local model on your own machine (our Ollama beginner guide covers running one).
Once pasted, work the way you normally do: ask the agent to implement the edits, then review its diff before accepting. EditUI stops at the handoff — it prepares context, it does not modify source code or deploy fixes. That boundary is deliberate, and it is why the workflow stays safe: the agent proposes, you approve.
One workflow tip that pays off fast: run your app locally and click through the real pages while collecting notes, then paste the whole batch in one go. Agents do better with a complete review than with five separate interruptions. If your local dev setup runs in containers, our Docker beginner guide gets that environment running.
What Stays Private When You Use EditUI?
Almost everything. EditUI is local-first by design: your notes live in chrome.storage.local in your own browser, and the extension has no account system, no backend, and no analytics. The content script sits on every page so the toolbar button can start a review, but per the privacy policy it does not read the page until Edit Mode is turned on.
The one moment data leaves your browser is when you press "Copy all" and paste the batch into a tool of your choice. That is a manual, deliberate action — nothing is uploaded silently. Uninstalling the extension removes your stored notes.
The practical rule: still read your batch before pasting, the same way you would read an email. If a note captured text from a page showing customer data or secrets, decide what the agent needs to see before you send it. The project's own explainer video spends its final section on exactly this — reviewing prompts before transferring sensitive data.
EditUI vs Faylee: Which One Do You Need?
These two get confused because both feed coding agents, but they solve opposite problems. EditUI is a design-review collector: you click elements and write edit notes ("make this heading smaller"), then paste one text batch into the agent yourself. Faylee is a bug-report recorder: it records the screen, console, every network request, and each click behind a bug on one timeline, then shares it as a single link that the agent reads through Faylee's MCP server.
| EditUI | Faylee | |
|---|---|---|
| Job | Collecting UI change requests as you review a design | Capturing runtime bug evidence as it happens |
| What you feed the agent | Your written notes + element context, as pasted text | Screen recording + console + network + clicks, via a shared link |
| Handoff | Copy the batch, paste it yourself — no MCP, no server | Paste the link; the agent reads it through Faylee's MCP server |
| Hosting | 100% local — no account, no backend, no upload | Cloud service — reports are uploaded and stored in a workspace |
| Price | Free and open source (MIT) | Free for up to 3 members |
| Pick it when | You can SEE the change you want and the agent can't | Something BROKE and you need the agent to see the evidence |
The one-line version: EditUI is for "make this look different," Faylee is for "this crashed and here is the proof." If you want Faylee's side of the story, start at faylee.app — its report pipeline is a different tool for a different moment.
What Are the 7 Beginner Mistakes to Avoid With EditUI?
| Mistake | Why it hurts | Do this instead |
|---|---|---|
| 1. Clicking elements with Edit Mode off | Nothing is captured — you are just browsing | Press Cmd-Shift-E (macOS) or Ctrl-Shift-E first, every session |
| 2. Writing vague notes like "fix this" | You lose the whole advantage over plain describing | Write the change, not the complaint: "shrink to 48px," not "too big" |
| 3. Sending one edit at a time | Five interruptions instead of one clean review pass | Collect the full batch, then press "Copy all" once |
| 4. Pasting without reading the batch | A note may carry text you didn't mean to share | Skim the copied prompt before it leaves your browser |
| 5. Expecting EditUI to edit code itself | It prepares context; it never touches your source files | Let the agent implement, then review its diff like always |
| 6. Building from source when the store install would do | Cloning the repo, installing Node 22 and pnpm 10, and loading an unpacked build for a tool you could one-click install | Use "Add EditUI to Chrome"; reserve the build path for contributing to the project |
| 7. Ignoring the viewport in your notes | "Looks broken" means nothing without a screen size | The viewport is captured automatically — mention mobile vs desktop in the note |
Mistake 5 deserves repeating because it is the most common misunderstanding: EditUI is a context courier, not a code editor. If your repo history is new to you, our Git beginner guide makes reviewing the agent's diffs much less scary.
Sources
Every fact in this guide was verified against these sources on November 2, 2026:
- EditUI README — github.com/junetic/editui (workflow, shortcuts, install paths, build commands, project stats)
- editui.app — the project's site (captured-note fields, batch-tray example, supported agents)
- EditUI privacy policy — store/privacy-policy.md, last updated September 29, 2026 (local-first storage, capture list, Copy-all boundary)
- Product Hunt — EditUI product and launch pages (launch date October 13, 2026; price $0; maker listing)
- "EditUI UI Review Handoff. A free Chrome extension?" — Aimora by Office Aim, YouTube (four-step workflow summary, human-review controls, sensitive-data cautions)
Frequently Asked Questions
Is EditUI free?
Yes. EditUI is free and open source under the MIT license, with no signup, no account, and no backend. The Product Hunt listing prices it at $0, and the repo is public at junetic/editui.
Does EditUI change my code for me?
No. EditUI prepares context — it never modifies source files or deploys anything. You paste the collected batch into Claude Code, Cursor, Codex, or another agent, and the agent makes the changes for you to review.
Which coding agents does EditUI work with?
The README names Claude Code, Cursor, and Codex; the project's site adds Windsurf under "works with the agent you already use." Because the output is plain text, you can paste it anywhere text goes — including a local model. Our Ollama beginner guide covers running one on your own machine.
Does EditUI upload my page data anywhere?
No. Notes stay in your browser's local storage, there is no EditUI server or analytics, and the content script does not read the page until Edit Mode is on. Page content leaves the browser only when you press "Copy all" and paste it yourself.
EditUI vs Faylee — what's the difference?
EditUI collects design-edit notes you write while pointing at elements, and you paste the batch into the agent as text. Faylee records bug evidence — screen, console, network requests, clicks — into a shared link the agent reads through its MCP server. Use EditUI for "make this look different" and Faylee for "here is proof it broke."
