Skip to main content
For custom React setups, unsupported frameworks, or when automatic installation doesn’t work, you can manually integrate React Grab using one of the methods below.

​
Installation Methods

Choose the method that best fits your setup:

CDN Script

Quick setup with a script tag

NPM Package

Install as a development dependency

HTML Script

Add directly to your HTML file

Dynamic Import

Import conditionally in JavaScript

​
CDN Script

The fastest way to add React Grab to any project:
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My App</title>
    <script>
      if (process.env.NODE_ENV === "development") {
        const script = document.createElement("script");
        script.src = "//unpkg.com/react-grab/dist/index.global.js";
        script.crossOrigin = "anonymous";
        document.head.appendChild(script);
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>
The CDN method requires that process.env.NODE_ENV is defined. Some build tools may not provide this variable.

​
NPM Package

For projects with a module bundler:
1

Install the package

npm install react-grab
2

Import in your entry file

Add this at the top of your main JavaScript/TypeScript file:
src/index.tsx
if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

// Your app code here
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

​
HTML Script

For static HTML files or simple setups without build tools:
index.html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>My App</title>
    <!-- Only load in development -->
    <script>
      // Check if we're in development (you can use your own logic here)
      const isDevelopment = window.location.hostname === "localhost" ||
                            window.location.hostname === "127.0.0.1" ||
                            window.location.hostname === "";
      
      if (isDevelopment) {
        const script = document.createElement("script");
        script.src = "//unpkg.com/react-grab/dist/index.global.js";
        script.crossOrigin = "anonymous";
        document.head.appendChild(script);
      }
    </script>
  </head>
  <body>
    <div id="root"></div>
    <script src="/your-app.js"></script>
  </body>
</html>
This method uses hostname detection to determine if you’re in development. Adjust the condition based on your setup.

​
Dynamic Import

For advanced setups with custom module loading:
src/index.tsx
// Conditional import with error handling
if (process.env.NODE_ENV === "development") {
  import("react-grab")
    .then(() => {
      console.log("React Grab loaded");
    })
    .catch((error) => {
      console.warn("Failed to load React Grab:", error);
    });
}

// Rest of your app
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

ReactDOM.createRoot(document.getElementById("root")!).render(<App />);

​
Environment Detection

Different frameworks and build tools use different methods to detect the environment: 
if (process.env.NODE_ENV === "development") {
  import("react-grab");
}

​
Framework-Specific Guides

For detailed instructions on supported frameworks:

Next.js

App Router and Pages Router integration

Vite

Vite-based React projects

Webpack

Webpack-based React projects

TanStack Start

TanStack Start integration

​
Unsupported Frameworks

React Grab currently doesn’t have automatic setup for:
  • Remix: Manual CDN script in root.tsx
  • Astro: Manual script in layout component
  • Gatsby: Manual plugin or HTML script
  • SvelteKit: Not applicable (Svelte-specific)
For these frameworks, use the CDN Script or NPM Package method and adapt to your framework’s structure.

​
Verification Steps

After manual installation, verify React Grab is working:
1

Start your development server

Use your framework’s dev command (e.g., npm run dev, npm start).
2

Open browser console

Check for any errors related to React Grab loading.
3

Test the copy feature

  • Hover over any UI element
  • Press ⌘C (Mac) or Ctrl+C (Windows/Linux)
  • Check your clipboard for the copied context: 
    <div class="my-component">...</div>
in MyComponent at src/components/MyComponent.tsx:42:8
4

Verify production exclusion

Build for production and ensure React Grab is not included in the bundle.

​
Common Issues

Check the environment condition: Make sure your development environment check is correct:
// Common checks
console.log(process.env.NODE_ENV); // Should be "development"
console.log(import.meta.env.DEV); // Should be true (Vite)
console.log(window.location.hostname); // Should be "localhost" or "127.0.0.1"
Check the browser console: Look for any error messages related to loading React Grab.
If you see CORS errors when loading from unpkg.com:
  1. Ensure you’re using crossOrigin="anonymous" on the script tag
  2. Try using https:// instead of // in the CDN URL
  3. Consider using the NPM package method instead
If you see “Cannot find module ‘react-grab’”:
  1. Install the package: npm install react-grab
  2. Restart your development server
  3. Clear any build cache
If React Grab is loading in production:
  1. Verify your environment check is correct
  2. Ensure your build tool is configured to replace environment variables
  3. Check that tree-shaking is enabled in your bundler
If you get TypeScript errors:
npm install -D @types/react-grab
Or add a type declaration:
src/react-grab.d.ts
declare module "react-grab" {
  const ReactGrab: any;
  export default ReactGrab;
}

​
Advanced Configuration

For advanced use cases, you can configure React Grab programmatically:
src/index.tsx
if (process.env.NODE_ENV === "development") {
  import("react-grab").then(() => {
    // Configure React Grab after it loads
    if (window.__REACT_GRAB__) {
      window.__REACT_GRAB__.configure({
        activationKey: "g",
        activationMode: "toggle",
        maxContextLines: 5,
      });
    }
  });
}
See the Configuration API for all available options.

​
Need Help?

If you’re having trouble with manual installation:
  1. Check the troubleshooting guide
  2. Search existing GitHub issues
  3. Ask in the Discord community
  4. Open a new issue with your setup details

​
Next Steps

Connect to Agent

Set up React Grab with your AI coding assistant

Configure Options

Customize activation keys and behavior

Build docs developers (and LLMs) love

Get started for freeTalk to us