Screen Ruler is a Chrome extension for measuring and inspecting live web pages. By popular demand, it now supports editing. Click an element, see its matched CSS, tweak values inline. Works on :hover/:focus and inside @media rules with every single change tracked and viewable in one place.
I am the solo creator of Screen Ruler, a Chrome extension that helps designers and developers inspect web pages.
For a long time it was strictly a measurement tool. But I kept hearing the same feedback from the community: you wanted to edit text on the page, reorder elements, and tweak CSS without leaving the browser. So I spent the last month or two building a brand new edit mode. It handles HTML edits, CSS tweaks, pseudo-state styling, and @media rules, with every change tracked so nothing gets lost.
Under the hood, it uses an Atomic CSS engine that stamps edited elements with a unique data-id and writes changes to a transient stylesheet. Every edit is scoped to its exact element, breakpoint and pseudo-state, with no cascade leakage to other contexts. So if you want to treat a live web page like a design canvas, this is for you.
Would love your feedback. Thanks for taking a look.
As a developer, I often end up opening DevTools just to tweak spacing, margins or font sizes and see what feels right.
Having a dedicated workflow for that with change tracking seems much more practical than losing everything after a refresh.
Nice work and congrats on the launch.
Nice update. The change tracking is the interesting bit, especially when a designer is editing a live app with a developer.
Do you export the change list as CSS/selectors or more like a visual snapshot, so someone can turn the tweaks into a real PR later?
This could be one of those tools you don't know you need until you've used it once and then can't go back. Inspecting margins/paddings on competitor sites is a daily task for solo builders without a design background.
Does it work on sites with heavy CSS modifications (Tailwind, shadcn variants), and is there a way to export measurements or snapshots for later reference?
Nice! I was using the Page Ruler extension before. It works, but I had a lot of trouble with the position of the measurements and numbers. Screen Ruler is better because I can easily measure components on the screen. You could add a free mode (unless I missed it) where I can select exactly what I want to measure
Making CSS edits work inside :hover and @media rules is the hard part. Most tools show computed styles, but resolving which rule is winning the cascade and exposing it as something editable requires careful CSSOM traversal. When building embeddable components, we've hit similar specificity headaches. How do you implement live :hover editing without injecting a forced class or inline style override?
Hey! 👋
Congrats on launching Screen Ruler! 🚀
Such a simple idea, yet incredibly useful. As a designer, I constantly need to measure spacing, alignment, and dimensions on screen, and having a lightweight tool dedicated to that workflow is a real productivity booster.
We're also launching Blazly Backlinker today, helping marketers automate backlink discovery, outreach, and guest posting from one workflow.
Would love to hear your thoughts if you get a chance to check us out as well. Wishing you a fantastic launch day! 🎉
About Screen Ruler on Product Hunt
“Edit anything on the web with change tracking”
Screen Ruler launched on Product Hunt on June 19th, 2026 and earned 97 upvotes and 8 comments, placing #13 on the daily leaderboard. Screen Ruler is a Chrome extension for measuring and inspecting live web pages. By popular demand, it now supports editing. Click an element, see its matched CSS, tweak values inline. Works on :hover/:focus and inside @media rules with every single change tracked and viewable in one place.
Screen Ruler was featured in Chrome Extensions (52.7k followers), Design Tools (261.2k followers) and Developer Tools (515.5k followers) on Product Hunt. Together, these topics include over 128.5k products, making this a competitive space to launch in.
Who hunted Screen Ruler?
Screen Ruler was hunted by Myster Violets. A “hunter” on Product Hunt is the community member who submits a product to the platform — uploading the images, the link, and tagging the makers behind it. Hunters typically write the first comment explaining why a product is worth attention, and their followers are notified the moment they post. Around 79% of featured launches on Product Hunt are self-hunted by their makers, but a well-known hunter still acts as a signal of quality to the rest of the community. See the full all-time top hunters leaderboard to discover who is shaping the Product Hunt ecosystem.
Want to see how Screen Ruler stacked up against nearby launches in real time? Check out the live launch dashboard for upvote speed charts, proximity comparisons, and more analytics.
Myster Violets
Hi Product Hunt,
I am the solo creator of Screen Ruler, a Chrome extension that helps designers and developers inspect web pages.
For a long time it was strictly a measurement tool. But I kept hearing the same feedback from the community: you wanted to edit text on the page, reorder elements, and tweak CSS without leaving the browser. So I spent the last month or two building a brand new edit mode. It handles HTML edits, CSS tweaks, pseudo-state styling, and @media rules, with every change tracked so nothing gets lost.
Under the hood, it uses an Atomic CSS engine that stamps edited elements with a unique data-id and writes changes to a transient stylesheet. Every edit is scoped to its exact element, breakpoint and pseudo-state, with no cascade leakage to other contexts. So if you want to treat a live web page like a design canvas, this is for you.
Would love your feedback. Thanks for taking a look.