SaaS Metrics
Product Hunt
Screen Ruler
The go-to ruler for designers and developers
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.
View Raw Thread
Developer & User Discourse
[Redacted] • May 29, 2026
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
[Redacted] • May 29, 2026
Now that is something we all never asked for. But we all need itNailed it man 🫡
[Redacted] • May 29, 2026
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!
[Redacted] • May 29, 2026
Can it measure elements across different browser zoom levels?
[Redacted] • May 29, 2026
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?
[Redacted] • May 23, 2026
# 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.
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.