UI Inspector
A visual CSS editor for your browser
229 followers
A visual CSS editor for your browser
229 followers
Inspect and visually edit elements directly on the page for faster design and UI debugging.
This is the 2nd launch from UI Inspector. View more
UI Inspector
Launched this week
A visual CSS editor that lives in your browser. Select any element, tweak its styles in a side panel, and instantly see changes on the page. Export your changes as CSS, Tailwind, SCSS, or JSX. Built-in presets automatically inherit the site's own color palette, so your edits look native from the start.
Free Options
Launch Team / Built With
Screen Ruler
Hey everyone 👋
I launched UI Inspector back in 2024, and while people seemed to appreciate the tool itself, the Pro offering missed the mark. Rather than patch something that wasn't working, I decided to step back and rethink the whole approach.
UI Inspector 2.0 is the result, an almost full rebuild with:
A new atomic CSS engine
Better change tracking
HTML editing including cut, copy, paste, duplicate, delete elements
CSS output is now included in the free plan
Tailwind, SCSS, and JSX exports
A completely reimagined preset system with build-in presets that inherit the site's own styles
Would love to hear what you think. Thanks for giving it a look.
Looks pretty interesting ... what sort of moat have you defined for folks just vibe coding changes and not necessarily debugging on the fly?
@dkofoed Presets that auto-inherit the site's color palette draw a clear line here. Vibe coders generate from scratch... they're not tweaking live production UIs element by element. DevTools lets you tweak but loses everything on refresh, no Tailwind or JSX export either. Keeping edits granular at the atomic CSS level makes the output committable. For design QA or client revisions, the loop becomes inspect, adjust, export Tailwind classes, push. Different lane from prompt-to-page generators. CSS export going free in 2.0 plus HTML editing pushes this toward a full in-browser design surface.