react-grab
Advanced tools
React Grab
Select context for coding agents directly from your website
How? Point at any element and press ⌘C (Mac) or Ctrl+C (Windows/Linux) to copy the file name, React component, and HTML source code.
It makes tools like Cursor, Claude Code, Copilot run up to 3× faster and more accurate.
Run this command at your project root (where next.config.ts or vite.config.ts is located):
npx -y grab@latest init
npx -y grab@latest add mcp
Once installed, hover over any UI element in your browser and press:
This copies the element's context (file name, React component, and HTML source code) to your clipboard ready to paste into your coding agent. For example:
<a class="ml-auto inline-block text-sm" href="#">
Forgot your password?
</a>
in LoginForm at components/login-form.tsx:46:19
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>
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</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>
{process.env.NODE_ENV === "development" && (
<Script
src="//unpkg.com/react-grab/dist/index.global.js"
crossOrigin="anonymous"
strategy="beforeInteractive"
/>
)}
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
Add this at the top of your main entry file (e.g., src/main.tsx):
if (import.meta.env.DEV) {
import("react-grab");
}
First, install React Grab:
npm install react-grab
Then add this at the top of your main entry file (e.g., src/index.tsx or src/main.tsx):
if (process.env.NODE_ENV === "development") {
import("react-grab");
}
Use plugins to extend React Grab's built-in UI with context menu actions, toolbar menu items, lifecycle hooks, and theme overrides. Plugins run within React Grab.
Register a plugin using the registerPlugin and unregisterPlugin exports:
import { registerPlugin } from "react-grab";
registerPlugin({
name: "my-plugin",
hooks: {
onElementSelect: (element) => {
console.log("Selected:", element.tagName);
},
},
});
In React, register inside a useEffect:
import { registerPlugin, unregisterPlugin } from "react-grab";
useEffect(() => {
registerPlugin({
name: "my-plugin",
actions: [
{
id: "my-action",
label: "My Action",
shortcut: "M",
onAction: (context) => {
console.log("Action on:", context.element);
context.hideContextMenu();
},
},
],
});
return () => unregisterPlugin("my-plugin");
}, []);
Actions use a target field to control where they appear. Omit target (or set "context-menu") for the right-click menu, or set "toolbar" for the toolbar dropdown:
actions: [
{
id: "inspect",
label: "Inspect",
shortcut: "I",
onAction: (ctx) => console.dir(ctx.element),
},
{
id: "toggle-freeze",
label: "Freeze",
target: "toolbar",
isActive: () => isFrozen,
onAction: () => toggleFreeze(),
},
];
See packages/react-grab/src/types.ts for the full Plugin, PluginHooks, and PluginConfig interfaces.
Want to try it out? Check out our demo.
Looking to contribute back? Check out the Contributing Guide.
Want to talk to the community? Hop in our Discord and share your ideas and what you've built 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.
Thank you to Andrew Luetgers for donating the grab npm package name.
FAQs
Select context for coding agents directly from your website
The npm package react-grab receives a total of 191,616 weekly downloads. As such, react-grab popularity was classified as popular.
We found that react-grab demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Multiple high-impact npm maintainers confirm they have been targeted in the same social engineering campaign that compromised Axios.
Security News
Axios compromise traced to social engineering, showing how attacks on maintainers can bypass controls and expose the broader software supply chain.
Security News
Node.js has paused its bug bounty program after funding ended, removing payouts for vulnerability reports but keeping its security process unchanged.