React Pin

Point at UI in your React dev server and hand it to a coding agent: component, source file:line, and your notes as one prompt.

Point at UI and hand it to your coding agent (Claude Code, Codex, Cursor, Copilot…) without describing where it is. Turn Pin on in your React dev server and hover anything: you see its component and the exact source file and line. Then: • Copy one element (⌘C / Ctrl+C) as a short reference your agent can act on: ### StatCard "37" Element: `app/StatCard.tsx:7` · `div.card.stat:nth-of-type(2) > strong.stat-value` • Or click several elements, write a note on each, and copy them all as one prompt: page URL, viewport, and for every note the component, file:line, a unique selector and your feedback. WORKS WITH • Next.js (Turbopack and webpack, client and server components) • Vite, Remix / React Router, Create React App and other webpack setups • React 19 (through your dev server's source maps) and React 18 and earlier • Pages without React still get a unique selector and the element's text HOW IT RUNS • Loads by itself on localhost, 127.0.0.1 and *.localhost. • Anywhere else (staging, a LAN address) only when you click the toolbar button or press the shortcut. Right-click the button for "Always load on this site". • A small island with the Pin toggle and Copy feedback; drag it to any edge, or out of the window to hide it on that site. • Shortcuts: ⌃P (macOS) / Alt+Shift+P (Windows, Linux) turns it on or off, rebindable at chrome://extensions/shortcuts. Copy keys only act while Pin is on, so normal copy and print are untouched. PRIVATE BY DESIGN No servers, accounts, analytics or tracking. It reads the page you point at and writes to your clipboard; nothing leaves your browser. Open source (MIT): https://github.com/maxktz/react-pin Not affiliated with Meta or the React team.