UIdebug turns the live browser into your design surface. Inspect any element, change its styles in a clean panel, then write the edits straight back to your files on localhost — no round-trips to the code.
Tweak the live UI until it's right, then sync the exact change back into the component that rendered it.
Live browser inspector — Alt+Shift+U to toggle.
Hover to highlight, click to select. The panel fills with that element's live styles instantly.
Layout, size, spacing, type, border, radius — change it all from a clean panel. Updates apply live.
Detects utility classes and swaps every control to a scale-token picker. Syncs clean class swaps.
On localhost, write your edits back to the exact file that produced them — with a diff preview first.
When an element uses Tailwind, every numeric control becomes a scale-token picker. Values read in px so they're instantly legible, but they sync as utility classes — keeping your source diff clean.
text-4xl, see 36px.p-[13px].md, your change writes md:text-2xl without touching the base.Tell UIdebug what you want — “round the corners more,” “tighten the padding.” It reads the element's tag, classes and computed styles, returns edits, and applies them live.
Routes through your own locally-running dev-server using your own API key — no key is ever bundled in the extension. For Tailwind elements, edits snap to the nearest token and sync as class swaps.
File sync uses the browser's File System Access API. The directory handle lives in your browser; file contents are never transmitted anywhere. Writing is strictly gated to localhost / 127.0.0.1.
Inspect and edit for free. Upgrade to Pro for AI Chat and File Sync.
Everything you need to inspect and edit visually.
Add to Chrome — FreeOr $99 / year — save two months.
Get ProYes — inspect and live-edit styles on any URL. Writing changes back to source files is only available on localhost / 127.0.0.1.
No. File sync uses the browser's File System Access API and writes directly to disk. File contents are never transmitted off your machine.
The Chat tab talks to your locally-running dev-server, which forwards requests to Anthropic using your own key. No key is bundled in the extension.
No. The content script mounts invisibly inside a shadow root and nothing changes until you start the picker — so its styles never collide with the page.
Click the extension icon or press Alt+Shift+U on any page to toggle the inspector panel.