react-grab README

The project's README from github.com/aidenybai/react-grab. As one markdown file: README.md.

React Grab

version downloads

Copy any UI element for your agent.

React Grab points agents to the actual source behind each selection. Agents are 2× faster and more accurate when using React Grab.

Website →

Quick Start

Run this at your project root:

npx grab@latest init

How It Works

React Grab turns a browser selection into source context your agent can use:

  1. Hover any UI element in your app.
  2. Press ⌘C or Ctrl+C.
  3. Paste the copied context into your agent.

The copied context includes the selected element and its component stack with source locations:

[<a class="ml-auto inline-block text-sm" href="#">Forgot your password?</a> in LoginForm (at components/login-form.tsx:46:19)]

Manual Installation

If you cannot use the CLI, install React Grab manually for your framework:

Next.js (App router)

Add this inside 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>
  );
}

Next.js (Pages router)

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>
  );
}

Vite

Add this at the top of your main entry file (e.g., src/main.tsx):

if (import.meta.env.DEV) {
  import("react-grab");
}

Webpack

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");
}

Build your own React Grab

Build a custom interface with the selection engine from react-grab/primitives. Use its APIs for hit testing, source context, page freezing, clipboard access, and editor navigation.

Customize hit testing

Scope hit testing to a container or replace the default element filter with your own rules.

import { getElementAtPoint, isElementGrabbable } from "react-grab/primitives";

export const getPickerTarget = (
  event: PointerEvent,
  appElement: Element,
  toolbarElement: Element,
): Element | null =>
  getElementAtPoint(event.clientX, event.clientY, {
    container: appElement,
    filter: (candidate) => isElementGrabbable(candidate) && !toolbarElement.contains(candidate),
  });

Add data-react-grab-ignore to your picker interface so hit testing skips its subtree.

Resources & Contributing Back

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

License

React Grab is MIT-licensed open-source software.

Thank you to Andrew Luetgers for donating the grab npm package name.

react-grab (aidenybai/react-grab)

clipboard
Searching Database…

7.7K ·GitHub
React-grab
What is this?React Grab lets you hover any UI element in your running React app, press Cmd+C or Ctrl+C, and copy that element's exact source location and component stack so you can paste it straight into your AI coding agent as context.
Is this a browser extension or a package I add to my code?It is not a browser extension - it is a small package you install into your React app (via a CLI or a manual code snippet) that injects a selection overlay into your running dev build.
How do I add it to my project?Run the setup command at your project root to install it automatically, or add it manually: inside app/layout.tsx for Next.js App Router, pages/document.tsx for Pages Router, at the top of your entry file for Vite, or install the package and import it at the top of your entry file for Webpack.
Which frameworks are actually supported right now?Manual install instructions only cover Next.js (App and Pages routers), Vite, and Webpack; other build setups aren't documented and would need a custom picker built with the primitives API.
Why are agents faster when using React Grab?The README states agents are 2x faster and more accurate when using React Grab, because it points them directly to the real source behind a selected UI element instead of making them search for it.
Can I exclude certain UI parts from being selectable?Yes, add the data-react-grab-ignore attribute to an element so React Grab's hit testing skips that entire subtree.
Is there a live demo I can try before installing it?Yes, the README links to an official demo you can try without installing anything in your own project.
What are similar projects?vConsole, bolt.new, inspector, qiankun, linaria, react-scan, bb, eruda
Which topics is it in?clipboard, coding, devtools, webpack, ai-coding, vite, nextjs, browser, coding-agent, ai-agent, react, npm
Creator
aidenybai
Size
87.8 MB
Stars
7.7K
Updated
CommitAug 22Release@react-grab/[email protected]Aug 16
Age
1y
Commits · 90 Days