Screen Ruler
Measure, Inspect, and Edit Anything on the Web
Start new thread

Screen Ruler - The go-to ruler for designers and developers

by•
Unlike browser DevTools, Screen Ruler is built for design workflows: visual flexbox/grid breakdown, gradient inspection with color stops, multi-element pseudo-state simulation, CSS-to-Tailwind conversion, and a Page tab with Performance, SEO, and Social previews.

Add a comment

Replies

Best
Maker
📌
# Product Hunt Launch Hi Product Hunt, Over the last 6 months, Screen Ruler has continued to grow to over 50,000 weekly active users on the Chrome Web Store. Screen Ruler continues to evolve as I expand its feature set so this launch doesn't have a typical "theme". Just a whole bunch of cool new stuff to try! - Stylesheet parsing: When selecting an element, see rules across all stylesheets that affect that element with specificity visualized. - Page inspection: A new Page tab with Performance, SEO issues, and Social previews. - Layout inspection block: A glanceable visual breakdown of flexbox and grid: axes, justify/align, gap, and tracks. - Inspector pinning: Now you can pin the floating inspector. - State simulation: Force an element into a different pseudo-state (hover, focus, active). - CSS to Tailwind conversion: Convert any element's CSS to Tailwind utility classes. - Breakpoints, box-model margin indicators, HSB color space, element-probe contrast detection, plus dozens of refinements across the inspector flow. Product Hunt Exclusive: Get 15% off Pro with code PH15OFF at checkout. Valid until the end of the month.

 This is impressive scope for a single release - the stylesheet parsing with specificity visualization and CSS to Tailwind conversion feel like real time-savers for the workflow. The fact that you've hit 50k WAU before this launch suggests you're solving something designers actually need.

Haven't launched on Product Hunt yet, but this caught my eye. Most rulers just measure. You added actual dev tools.

Genuinely curious – devs or designers as the main user?

Maker

 Thanks for the comment. The audience is both but definitely skews to the design-conscious developer.

Can it measure elements across different browser zoom levels?

Maker

 Yes. Measurements are in CSS pixels, so they're accurate at every zoom level.

As a designer this seems useful to do design QA and provide specific feedback to devs on what to change.

I've typically done this manually through browser developer tools. I find the item, adjust the css until I get the desired result (when possible). Then I give that info to dev for updating.

This will save a bit of time, although it would nice to be able to edit the code from the Screen Ruler sidebar. Then I wouldn't have to use dev tools at all. But I'm not sure the browser allows that.

Great work!

Maker

 Thanks for your comment. Editing is on the roadmap!

Now that is something we all never asked for. But we all need it

Nailed it man 🫡

Right thing shows up at the right time ! I'm making a pitch deck for my product and it's so hard to center / align stuffs and this help a lot. Well done G

This is your second launch since 2024, what has changed since the first version?
Curious what user feedback shaped this one.