Skip to main content
React Grab works seamlessly with Vite-based React projects, loading efficiently through your index.html file.

​
Automatic Installation

The quickest way to get started:
1

Run the CLI

Navigate to your project root (where vite.config.ts is located) and run:
npx -y grab@latest init
The CLI will automatically detect your Vite setup and configure React Grab.
2

Start your dev server

Launch your Vite development server:
npm run dev
3

Test the installation

Hover over any UI element and press ⌘C (Mac) or Ctrl+C (Windows/Linux) to copy its context.

​
Manual Installation

If you need to manually integrate React Grab into your Vite project:
1

Update your index.html

Add the following script inside the <head> section of your index.html:
index.html
<!doctype html>
<html lang="en">
  <head>
    <script type="module">
      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>
2

Install the package

Install React Grab as a dev dependency:
npm install -D react-grab
The import.meta.env.DEV check ensures React Grab only loads in development mode. Do not remove this condition.

​
How It Works

Vite’s module system allows for dynamic imports using import.meta.env.DEV:
  • Development: When import.meta.env.DEV is true, React Grab loads and activates
  • Production: When building for production, the condition is false and the import is stripped out
  • Type-safe: The module script ensures proper ES module handling
This approach is more efficient than using a CDN because:
  • Vite can optimize and bundle the import
  • No external network requests needed
  • Better caching and hot module replacement (HMR) support

​
Vite Configuration

No additional Vite configuration is required. React Grab works out of the box with:
  • React
  • Preact
  • SolidJS
  • Vue (with JSX)
  • Any other framework using Vite

​
Verification

Confirm React Grab is working correctly:
1

Start development server

npm run dev
Check the browser console for any errors during startup.
2

Test the copy feature

  • Hover over any UI element
  • Press ⌘C (Mac) or Ctrl+C (Windows/Linux)
  • Check your clipboard for the copied context
3

Verify production exclusion

Build your app and confirm React Grab is not included:
npm run build
React Grab should not appear in your production bundle.

​
Common Issues

Make sure you’ve installed react-grab as a dependency:
npm install -D react-grab
Then restart your dev server.
The script must be placed in the <head> section, before your main app script. This ensures React Grab loads before your React components.
If you see TypeScript errors related to import.meta.env, ensure your tsconfig.json includes:
{
  "compilerOptions": {
    "types": ["vite/client"]
  }
}
React Grab is designed for browser environments. It should not affect Vitest tests since they run in Node.js. If you encounter issues, check that your test setup doesn’t try to import the index.html.

​
Alternative: Import in Entry File

If you prefer not to modify index.html, you can import React Grab in your main entry file:
src/main.tsx
if (import.meta.env.DEV) {
  import("react-grab");
}

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
Using the entry file method may cause a slight delay in React Grab initialization. The index.html method is recommended for the best experience.

​
Next Steps

Connect to Your Agent

Integrate React Grab with your AI coding assistant

Customize Settings

Configure activation keys and behavior

Build docs developers (and LLMs) love

Get started for freeTalk to us