When building or reviewing a frontend UI, desktop app, or Figma implementation on Windows, you constantly need to check:

  • Is this button padding actually 16px or 18px?
  • Are these two cards aligned to the same horizontal baseline?
  • What is the exact W × H px gap between two containers across different windows?

Browser DevTools only inspects DOM nodes inside a single tab—it doesn't work across native Windows apps, Figma desktop, PDFs, or side-by-side comparison windows. And classic screen ruler utilities require manually aligning two floating ruler bars pixel by pixel.

In SnapBolt v2.6.4, I built a Smart Edge-Detecting Pixel Ruler (D key) + 1px Magnifying Loupe (#HEX Color Picker) that lets you measure and annotate pixel distances anywhere on Windows 10/11 in 1 second.

👉 Free Download for Windows 10 / 11:
https://snapbolt.dev/en/screen-pixel-ruler-measure-windows

📏 1. Auto-Detecting UI Edges on Hover (D Key)

SnapBolt Capture & Annotation

  1. Press PrintScreen (or Ctrl + Shift + S) to freeze your screen and select an area.
  2. Press D (or click 📏 Ruler on the annotation toolbar).
  3. Hover anywhere inside a button, card, or margin:
    • SnapBolt ray-casts outward in 4 directions (Left, Right, Top, Bottom) from your cursor pixel.
    • As soon as it hits a luminance/color contrast boundary (ΔRGB > threshold), it locks onto the horizontal and vertical edges and displays the exact W × H px dimensions in real time.
  4. Drag to measure & bake into the screenshot:
    • Need to show a developer that a margin is 23px instead of 24px? Drag across the gap with the Ruler tool to draw a permanent dimension line with a px label directly onto your screenshot, then press Ctrl + V into GitHub Issues, Linear, Slack, or Jira!

🎨 2. Built-In 1px Magnifying Loupe & #HEX Color Picker (C Key)

While selecting a capture region, a high-DPI magnifying loupe follows your cursor showing:

  • Exact (X, Y) screen coordinates
  • The pixel's #RRGGBB hex color swatch
  • Press C to copy the #HEX color code straight to your clipboard without even taking a screenshot.

🖼️ 3. Pin Reference Designs Always-on-Top & Drag-and-Drop Anywhere

Comparing a Figma mockup against your localhost build?

  • Capture the design and click 📌 Pin to float it always-on-top over your IDE or browser.
  • In v2.6.4, you can drag any pinned screenshot (with a live translucent preview following your cursor) and drop it directly into ChatGPT, Slack, Discord, or Notion.

🚀 Get SnapBolt v2.6.4 (Free Download)