From install to first capture

Seven short sections. The first four cover the free extension. The last three describe Pro, which is still being built.

01Free

Install the extension

Tracewind runs as a Chrome extension and needs no account for the free tier.

1Tracewind is on its way to the Chrome Web Store. This page will link to the listing as soon as it is approved.
2Once installed, pin it to the toolbar so catch mode is one click away.
3Open any page and click the Tracewind icon, or press Alt+Shift+C, to switch catch mode on.

02Free

Catch mode outlines whatever is under your cursor and labels it with its tag.

1Move over the page. The outline follows the innermost element.
2Click to lock the selection, then press Up to step out to the parent or Down to step into the first child.
3Press Esc to release the selection. Press Esc again to leave catch mode.

03Free

The panel has two parts: measurements on top, code underneath.

1Measurements list size, layout, gap, padding and how the element sits in its parent.
2Fills, backdrop filters, radii, shadows and transitions are listed in the same table.
3Code is the whole component, contents included, as React with Tailwind classes. Off-scale values are kept exact.

04Free

Captures are stored in the extension's browser storage, not in your file system.

05Pro

In development. Turn a set of captures into one coherent template.

06Pro

In development. Audits run against your own pages and report layout flaws as tickets.

07Pro

In development. Record how an interaction moves, not only how it looks at rest.

System sync, audit reports and motion capture are being built. Leave your email and you will hear the day they are ready.