Changelog

Name: Raval
Author: Raval Contributors

All notable changes to Raval. Follows Keep a Changelog format.

v0.4.0

In development

Inspect shows an element’s corner radius next to its size, and the outline follows its rounded corners
Show spacing in Inspect (B): the padding, margin, and gaps between children of the element you click
Guides measure the distance between two parallel guides when the pointer rests between them, and from a guide you point at or drag
Browse: put the tool down with 0, the hand button, or by pressing the active tool again. The page works as usual and your guides and annotations stay
One colour for guides, highlights, measurements, and annotations, picked in any mode’s options or with Shift+1–8
Notes can be rotated with the handle above them; hold Shift for 15° steps
Four handwriting fonts for notes
Arrow ends: nothing, an arrowhead, a bar, or a dot at either end, so an arrow can also be a plain line
The pen draws ink that thins as you move faster, in four widths. Hold Shift for a straight line; click for a dot

Snapping guides to page edges takes far less work, so Guides stays smooth on slower computers

Keyboard shortcuts stopped working after clicking a toolbar button
Clicking the page could put the cursor in a text field, after which shortcuts were typed into it
After switching tools with a key, the focus ring stayed on the previous tool
Guides could not be placed along the top and left edges of the window, over embedded content, or on disabled buttons
The toolbar did not move back after an options card closed
Undo did not reverse moving a note or an arrow

In development

A motion tuning panel meant only for development was included in 0.3.1 by mistake. It is removed

October 8, 2026

A welcome page opens after installing, with the three steps to get started and something to practise on

Renamed from Calipers to Raval. Your saved guides and settings carry over
Notes are written straight onto the page, with no box around them
The first Annotate tool is now called Callout (it was Size)
The default shortcut to open Raval is Alt+Shift+C (Option+Shift+C on a Mac). The old one clashed with the browser’s own

October 6, 2026

Inspect details — click text or an element for its typography, colours, and box values, each in a collapsible section
Undo — Cmd/Ctrl+Z reverses changes in Measure, Guides, and Annotate
Guides — click a guide to delete it, drag to move it; guides are now kept per page
Toolbar — a single compact bar with options that open on demand
Annotate mode — notebook-style UI critique with size callouts, notes, arrows, freehand, and PNG export
Canvas layers — guides and measurements stay visible across mode switches until cleared
Guide placement — choose Both, Horizontal only, or Vertical only (H / V / C)
Region screenshot — drag a rectangle to capture a cropped PNG
Draggable control panel — drag the header to reposition; position is saved across sessions
Clear guides / measurements / annotations from the control panel in any mode
Figma plugin — import Raval measurements directly into a Figma file
Shareable sessions — generate a link that replays a measurement session in another browser
Measurement presets — save and name common measurements (e.g. "8pt grid", "nav height")
Accessibility auditing — contrast ratio checker and touch target size validator (WCAG 2.1 AA/AAA)
Changelog diff mode — visually compare how element sizes changed between two page snapshots

Colours is now part of Inspect, and Spacing grid is removed in favour of Measure; modes are Inspect, Measure, Guides, Annotate on keys 1–4
The box model overlay on the page is replaced by the Box section in Inspect details
Highlights, tabs, tooltips, and notifications share one lighter design
Raval redraws only while something is happening, and the cursor and labels move without forcing layout
Screenshots no longer include the Raval toolbar, cursor, or notifications

Clicking the extension icon now works in tabs that were open before Raval was installed or updated
Number-key mode shortcuts now update the toolbar
Guides no longer appear on other sites or pages
Guides cleared with right-click, Del/Backspace, or Clear all now stay deleted after reopening Raval

June 24, 2026

Inspect mode — hover any element to see width × height, typography, CSS path, and viewport distances
Measure mode — click two or more elements to see pixel distance between closest edges
Guides mode — place draggable horizontal and vertical alignment guides with snap-to-element edges
Colour picker mode — sample element colours and copy as HEX, RGB, or HSL
Spacing grid mode — show all gaps between sibling elements at once
Box model overlay — colour-coded margin, padding, border, and content rings
Ruler overlay — pixel rulers along viewport edges with cursor crosshair
Design token panel — extract CSS custom properties and export as JSON
Screenshot export — capture the viewport with measurements baked in
Multi-element measurement — pin up to 5 elements; every consecutive pair measured simultaneously
Copy-to-clipboard for all measurements and colour values
Keyboard shortcuts for every mode and tool (1–5, B, D, S, ?, Esc)
Floating control panel with mode switcher and per-mode toggles
Persist guides and settings across sessions via chrome.storage
Firefox extension build with WebExtensions API parity
Companion website with interactive demo, docs, and keyboard shortcut reference
Chrome Web Store listing