Grab any element on in your app and give it to Cursor, Claude Code, etc. to change.
By default coding agents cannot access elements on your page. React Grab fixes this - just point and click to provide context!
- Hold ⌘C and click on any element on your page
- Works with Cursor, Claude Code, OpenCode
- Just a single script tag (it’s just JavaScript!)
Get started in 1 minute by adding this script tag to your app:
<script
src="//unpkg.com/react-grab/dist/index.global.js"
crossorigin="anonymous"
data-enabled="true"
></script>If you're using a React framework or build tool, view instructions below:
Add this inside of your app/layout.tsx:
import Script from "next/script";
export default function RootLayout({ children }) {
return (
<html>
<head>
{/* put this in the <head> */}
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
data-enabled="true"
/>
)}
{/* rest of your scripts go under */}
</head>
<body>{children}</body>
</html>
);
}Add this into your pages/_document.tsx:
import { Html, Head, Main, NextScript } from "next/document";
export default function Document() {
return (
<Html lang="en">
<Head>
{/* put this in the <Head> */}
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
data-enabled="true"
/>
)}
{/* rest of your scripts go under */}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}Your index.html could look like this:
<!doctype html>
<html lang="en">
<head>
<script type="module">
// first npm i react-grab
// then in head:
if (import.meta.env.DEV) {
import("react-grab");
}
</script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Want to try it out? Check the our demo.
Looking to contribute back? Check the Contributing Guide out.
Want to talk to the community? Hop in our Discord and share your ideas and what you've build with React Grab.
Find a bug? Head over to our issue tracker and we'll do our best to help. We love pull requests, too!
We expect all contributors to abide by the terms of our Code of Conduct.
→ Start contributing on GitHub
React Grab is MIT-licensed open-source software.