Chrome extension that x-rays any website. Hold Shift and drag a frame over UI to see its spacing, sizes, radii and 4px grid, measured live from the page.
About Gridray
Gridray, at gridray.dev, is a Chrome extension by Sven Matthis that turns any page into a spec sheet. You hold Shift and drag a frame over a button, a card or a whole section. Inside the frame the UI turns into a skeleton, and every measurement draws itself in. You see spacing, sizes, radii and a 4px grid.
Everything is read live from the page. The store listing says the specs follow hover states, animations and layout changes while you look. Sven first showed the overlay in October 2026 as a way to drag a frame over a component and see its dev specs. On November 10, 2026 he released it as a Chrome extension that works on any site.
The store listing calls it private by design. Gridray does nothing until you click its toolbar button, runs only in the tab you turn it on for, and never collects or sends any data. Alt+Shift+S turns it on or off. For local HTML files, turn on Allow access to file URLs in the extension's details.
The site says Gridray is available on desktop only. The Chrome Web Store listing, at chromewebstore.google.com, labeled it version 0.2.0 Beta under Developer Tools when checked on November 12, 2026.
Pricing: The site links a Buy Me a Coffee page to support the maker.
Features
- Hold Shift and drag a frame over a button, a card or a whole section
- Inside the frame the UI turns into a skeleton and the measurements draw in
- Shows spacing, sizes, radii and a 4px grid
- Read live from the page, so specs follow hover states, animations and layout changes
- Does nothing until you click its toolbar button, and runs only in that tab
- The developer says it does not collect or send any data
- Alt+Shift+S turns it on or off
- Works on local HTML files once Allow access to file URLs is on
FAQs
Common questions about Gridray
