Catch any container
A hover selector isolates the element under your cursor and works out the layout it actually produces, including what its parent contributes.
- grid tracks and gaps
- parent flex rules
- layer order
- padding on every side
Loading page
Loading page
A Chrome extension that reads the grid, spacing and effects of any live element, then hands you the React and Tailwind.
Sample page. Hover any part of it.
Catch mode on
Team plan
Ship the redesign your whole team can read.
Seats
12
Billed per editor
Caught
div, Feature card
React + Tailwind
<div
className="col-span-6 flex flex-col items-start gap-4 rounded-2xl border border-white/10 bg-white/5 p-6 sm:col-span-4"
>
{children}
</div>You can see that a page feels right. Finding out why still means opening fifteen nested divs and adding up the padding yourself.
Tool
Built for
Where it leaves you
Browser inspect panel
Debugging one box at a time: rules, overrides, network, scripts.
Never tells you what the whole component is doing as a layout.
AI design generators
A fast first draft from a prompt.
Loose margins and spacing that follows no scale, with nothing real to check against.
Copy-the-CSS extensions
Grabbing the raw HTML and CSS of a fragment.
Ignores the parent grid, so the copy falls apart outside its original page.
Tracewind
Reading an element with its parent and children, as one layout.
Nothing to rebuild by hand: you get measurements and a class string.
Everything in this section is in the free tier.
A hover selector isolates the element under your cursor and works out the layout it actually produces, including what its parent contributes.
The values that make a surface feel finished are listed on their own, so you are not hunting for them between resets and overrides.
Computed rules become utility classes on a React component. On-scale values use the Tailwind scale and everything else stays exact.
Captures are saved inside the browser and grouped by project tag. Your Downloads folder stays out of it.
Pro is being built now. It turns your library into something you can assemble, check and animate.
Select several captures and assemble them into one structured landing page or dashboard template, with shared spacing and a single set of tokens.
Point it at your own build. Each finding is written like a ticket: what was expected, what the layout actually does, and the exact line to change.
Record transition properties, animation loops and state logic from an interaction, then export them as clean animation code.
A sample audit finding
AUDIT-014, spacing
Major
Pricing cards break the spacing scale
Fix in pricing-grid.tsx, line 12
- className="grid grid-cols-3 gap-5 p-[18px]"+ className="grid grid-cols-3 gap-4 p-4"
Tag a capture once and it stays with that project. Try the tags to see how the library filters.
The extension costs nothing. Pro adds the workspace and is not open yet.
Annual saves 25% on Pro
$0forever
The extension, for inspecting live sites and copying single fragments.
$9planned, per month, billed $108 yearly
Not open yet. Assemble what you catch into pages, audit your own code, and export motion.
DevTools shows you every rule that touches one box, one box at a time. Tracewind reads the element together with its parent and children, works out the layout that results, and gives you that as a short list of measurements and a Tailwind class string.
React function components with Tailwind CSS utility classes, ready to paste into a Next.js project. Values that sit on the Tailwind scale use the scale. Values that do not are written as arbitrary values so nothing is silently rounded.
In the extension's own storage inside your browser, grouped by the project tags you set. Nothing is written to your Downloads or Documents folders, and nothing is sent to a server.
Spacing, grid structure and timing values are measurements, and studying them is how most of us learned layout. Logos, images, copy, fonts and anything that makes a page recognisably someone else's brand are theirs. Tracewind captures structure and style values, and leaves content and assets behind.
It reads computed styles, so it works on any page Chrome can render, whatever framework built it. Content inside cross-origin iframes and closed shadow roots cannot be read by any extension, including this one.
System sync, audit reports and motion capture are being built. Leave your email and you will hear the day they are ready.