Raval vs PixelSnap
PixelSnap is a popular macOS tool for measuring screenshots. Raval brings the same precision to your browser — with direct DOM access and no screenshot step.
Why developers switch
PixelSnap is excellent for measuring static screenshots, but web developers often need to check spacing on live pages — after CSS changes, responsive breakpoints, or dynamic content. Raval measures elements directly in the DOM, so you always get the real rendered size, not an approximation from a captured image.
Comparison
| Feature | Raval | Alternative |
|---|---|---|
| Platform | Chrome & Firefox extension | macOS desktop app |
| Measurement method | Direct DOM access on live pages | Screenshot-based |
| Measure distance between elements | Yes — click two or more elements | Yes — on screenshots |
| Alignment guides | Yes — draggable, snap-to-edge | Yes |
| Box model overlay | Yes — margin, padding, border, content | No |
| Design token extraction | Yes — CSS custom properties | No |
| Works on any webpage | Yes — in the browser | Requires screenshot first |
| Price | Free, open source (MIT) | Paid (one-time purchase) |
| Open source | Yes | No |
When Raval is the better fit
Choose Raval when you want to measure spacing on a live webpage without leaving the browser, verify responsive layouts at different viewport sizes, inspect box model values alongside distances, or use a free open-source tool your whole team can install in seconds.
Related
See also Raval vs Page Ruler Redux or read the design handoff use case.
Install for Chrome (opens in new tab), or view the source on GitHub (opens in new tab).