Raval vs Page Ruler Redux
Page Ruler Redux is a lightweight pixel ruler for Chrome. Raval extends that idea with multi-element measurement, guides, box model inspection, and more.
The short version
If you only need a simple ruler overlay, Page Ruler Redux works well. If you regularly check spacing between UI elements, verify alignment against a design spec, or inspect box model values during QA, Raval is built for that workflow.
Comparison
| Feature | Raval | Alternative |
|---|---|---|
| Hover dimensions | Yes — Inspect mode | Yes |
| Measure distance between elements | Yes — up to 5 elements at once | Basic ruler only |
| Alignment guides | Yes — draggable, persisted | No |
| Box model overlay | Yes | No |
| Snap to element edges | Yes | No |
| Design token extraction | Yes | No |
| Screenshot export | Yes — with measurements | No |
| Keyboard shortcuts | Full keyboard-first workflow | Limited |
| Open source | Yes (MIT) | No |
What Raval adds
Click two elements in Measure mode and Raval shows the pixel gap between their closest edges — with alignment guidelines drawn automatically. Switch to Guides mode to pin horizontal and vertical lines you can drag onto element edges. Click any element in Inspect mode to see its margin, padding, and border values without opening DevTools.
Related
See also Raval vs PixelSnap or the frontend QA guide.
Install for Chrome (opens in new tab), or view the source on GitHub (opens in new tab).