What is react-grab?

aidenybai/react-grab — explained in plain English

Analysis updated 2026-06-24

★ 7,193TypeScriptAudience · vibe coderComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((react-grab))
    What it does
      Copy element source context
      File path and line number
      Component tree snapshot
    How it works
      Hover to select
      Ctrl C to copy
      Paste into AI chat
    Tech stack
      TypeScript
      React
      Next.js Vite Webpack
    Use cases
      AI-assisted UI edits
      Dev inspection tool
      Custom plugins
    Audience
      Vibe coders
      React developers

mindmap root((react-grab)) What it does Copy element source context File path and line number Component tree snapshot How it works Hover to select Ctrl C to copy Paste into AI chat Tech stack TypeScript React Next.js Vite Webpack Use cases AI-assisted UI edits Dev inspection tool Custom plugins Audience Vibe coders React developers

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Hover over any UI element and copy its source context to paste into Cursor or Claude for targeted code edits without manual file searching.

USE CASE 2

Write a custom plugin that adds a right-click action to freeze the hover state so you can inspect dynamic or animated elements.

USE CASE 3

Speed up AI-assisted UI changes by giving the AI the exact component tree, file path, and line number instead of describing the element in words.

What is it built with?

TypeScriptReactNext.jsViteWebpack

How does it compare?

	aidenybai/react-grab	eutropicai/final2x	deepstreamio/deepstream.io
Stars	7,193	7,189	7,188
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	moderate	moderate
Complexity	2/5	2/5	3/5
Audience	vibe coder	designer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercially, as long as you keep the MIT copyright notice.

So what is it?

React Grab is a development tool for React apps that helps AI coding assistants make more targeted edits to your code. When you are using a tool like Cursor or a similar AI agent to change your app's appearance, the agent normally has to guess which file and which lines correspond to the button or section you want to change. React Grab removes that guessing. You hover over any element on the page in your browser, press Cmd+C or Ctrl+C, and the tool copies a structured block of context: the HTML for the selected element, the exact file path and line number where that element lives in your source code, the surrounding code lines, and the React component tree above it. You then paste that block into your AI agent's chat, and the agent can start editing the right place right away. Setup is a single terminal command at your project root. The README also includes manual installation instructions for Next.js, Vite, and Webpack. React Grab only loads in development mode, so it has no effect on your production build. The tool supports plugins, which let you add custom actions to a right-click context menu or a toolbar. A plugin can trigger any JavaScript function when you select an element: logging it, freezing the hover state for inspection, or anything else you define. Plugins register and unregister cleanly, so they can be tied to React component lifecycles. React Grab is open-source under an MIT license and is written in TypeScript. Benchmarks linked from the README suggest edits made with it are about twice as fast compared to working without the extra source context.

Copy-paste prompts

Prompt 1

I installed react-grab in my Next.js app. Walk me through writing a plugin that logs the selected element's component name and props to the browser console.

Prompt 2

Show me how to add react-grab to a Vite and React project manually and verify it only loads in development mode, not in the production build.

Prompt 3

I am using Cursor to edit my React app. Show me the exact workflow: hover an element, copy with react-grab, paste into Cursor to change a button's color.

Prompt 4

Write a react-grab plugin that adds a 'Copy Tailwind classes' action to the right-click context menu for any selected element.

Prompt 5

How does react-grab's plugin register and unregister lifecycle tie into React component mount and unmount so plugins clean up properly?

Frequently asked questions