Getting Started with Raval
Raval is a free, open-source browser extension that lets designers and developers instantly measure distances, inspect dimensions, and check alignment on any webpage. Think PixelSnap, but for the browser — with direct DOM access for pixel-perfect accuracy.
Install
The fastest way to get started is the Chrome Web Store. Click Add to Chrome, then press Option+Shift+C (Mac) or Alt+Shift+C (Windows/Linux) to activate on any page.
Prefer to build from source? See the full installation guide.
Quick Tour
Activate Raval
Press Option+Shift+C / Alt+Shift+C to toggle Raval on the current page. A compact toolbar appears at the top of the page with the modes, capture buttons, and options that open on demand.
Four Modes
- Inspect (1) — Hover to see an element's size; click text or an element for its typography, colours, and box values.
- Measure (2) — Click elements to measure pixel distance between closest edges. Pin up to five at once.
- Guides (3) — Place draggable alignment guides with snap-to-element edges.
- Annotate (4) — Mark up the page with size callouts, notes, arrows, and freehand strokes.
Tools & Overlays
- Details — Click in Inspect for typography, colours, margin, padding, and radius.
- Rulers — Pixel rulers along viewport edges with cursor crosshair.
- Design tokens (D) — Extract CSS custom properties and export as JSON.
- Screenshot (S) — Export the viewport with measurements baked in.