Demo

React Grab is live on this page.

Everything below is grabbable: buttons, animations, form controls, tables, even elements mid-flight. Grab one and paste it into your agent.

How you use it

Hover any element on this page to see it highlighted.
Press ⌘C (or Ctrl+C) to copy it. Drag instead to grab a whole region.
Paste into Claude Code, Codex, or Cursor.

What agents get

A grab gives your agent the source behind what you see:

The element’s markup
The component stack from the React tree
Source locations, like components/login-form.tsx:46:19

Describing UI in prose (“the orange link near the footer”) makes your agent search for it. A grab names the file and line, so it starts editing instead.

Try it on the playground below. Moving targets are fair game: a grab mid-animation resolves to the same source as a still one.

Copy any UI element✦Point your agent at the source✦2× faster retrieval✦Works in Claude Code, Codex, and Cursor✦

Live data

0Elements grabbed

0Files located

0%Time saved

Local time--:--:--Updating every second

Motion

Bounce

Spin

Ping

Pulse

Now playing

Grab Anything — The Fibers

Loading states

Syncing workspace…

Indeterminate sweep — grab the bar mid-flight and it still resolves to the same source.

Buttons and badges

DefaultSecondaryOutlineDestructiveLive

Form controls

Role

Feedback

Accept terms

Notifications

Volume

Tabs

Manage your profile, email address, and password from one place.

Table

Invoice	Customer	Status	Amount
INV-0042	Acme Corp	Paid	$1,250.00
INV-0043	Monsters Inc	Pending	$864.00
INV-0044	Stark Industries	Paid	$3,120.00
INV-0045	Wayne Enterprises	Overdue	$540.00

Overlays

Tips

Grab the exact element rather than its container; the label shows which component you have.
Drag across a cluster of elements to grab all of them at once.
One grab per change keeps the agent focused on a single edit.