Screen Ruler
Measure, Inspect, and Edit Anything on the Web
448 followers
Measure, Inspect, and Edit Anything on the Web
448 followers
Screen Ruler is the perfect companion for web developers and designers. See sizes, distances, margins and paddings of any element on any web page.
This is the 4th launch from Screen Ruler. View more
Screen Ruler
Launching today
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.
Free Options
Launch Team / Built With
Screen Ruler
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.
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?
Screen Ruler
Every edited element gets marked with a data-attribute stamp that the engine uses to apply edits through an injected stylesheet. For pseudo-states the engine uses a selector pattern that wins the cascade reliably without modifying the element's class list or computed style attribute.
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 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?
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
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.
Blazly Backlinker
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! 🎉