Screen Ruler

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! 🎉

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.