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.
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.
On the analytics side, Screen Ruler competes within Chrome Extensions, Design Tools and Developer Tools — topics that collectively have 829.3k followers on Product Hunt. The dashboard above tracks how Screen Ruler performed against the three products that launched closest to it on the same day.
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.
For a complete overview of Screen Ruler including community comment highlights and product details, visit the product overview.
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.