React Grab VisBug Copy

Track visual edits made with VisBug and copy them with file paths to give to AI agents.

What is this?

This tool combines VisBug's visual editing capabilities with React Grab's selection system to help you:

1. 🎨 Visually edit any element on a page (colors, fonts, spacing, etc.)
2. 📍 Track the changes you made
3. 📋 Copy the changes as CSS + HTML to give to AI agents

Installation

$3

``bash npm install react-grab-visbug-copy

`or`


pnpm add react-grab-visbug-copy

$3

`bash

`Clone or download this repository`


git clone https://github.com/jacksonkasi1/react-grab-visbug-copy.git


Framework Integration
$3

Add this to your app/layout.tsx:

`tsx import { Script } from "next/script";

export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {process.env.NODE_ENV === "development" && ( <> src="https://unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" /> src="https://unpkg.com/react-grab-visbug-copy/dist/client/standalone.js" strategy="lazyOnload" /> )} {children} ); }`

`$3`

Add this to your pages/_document.tsx:

`tsx import { Html, Head, Main, NextScript } from "next/document"; import Script from "next/script";

export default function Document() { return ( {process.env.NODE_ENV === "development" && ( <> src="https://unpkg.com/react-grab/dist/index.global.js" strategy="beforeInteractive" /> src="https://unpkg.com/react-grab-visbug-copy/dist/client/standalone.js" strategy="lazyOnload" /> )}

$3

Add this to your index.html in the :

`html`

Or import in your main entry file:

`tsx // src/main.tsx or src/main.jsx if (process.env.NODE_ENV === "development") { import("react-grab"); import("react-grab-visbug-copy"); }

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

const root = ReactDOM.createRoot(document.getElementById("root")!); root.render( );`

`$3`

Add to your webpack config or HTML template:

`html`

Or use dynamic import in your entry file:

`javascript if (process.env.NODE_ENV === "development") { import("react-grab"); import("react-grab-visbug-copy"); }`

`$3`

`html


Live Examples
Try these interactive examples to see VisBug Copy in action:
| Example | Description | Demo |
|---------|-------------|------|
| 01-basic-button.html | Simple button with hover effects | Click the button, edit styles with VisBug |
| 02-card-component.html | Card UI components | Edit cards with images and text |
| 03-navigation-bar.html | Navbar and hero section | Edit navigation and CTA buttons |
| 04-form-elements.html | Form inputs and buttons | Edit form styling and focus states |
$3

`bash

`Clone the repository`


git clone https://github.com/jacksonkasi1/react-grab-visbug-copy.git
Open any example in your browser

open examples/web/01-basic-button.html
or

cd examples/web && python3 -m http.server 8080
Then visit http://localhost:8080/01-basic-button.html


How It Works

1. Activate: Press Cmd+C (Mac) or Ctrl+C(Windows) to activate React Grab overlay 2. Select: Click on any element to select it 3. Track: PressTto track the element's original styles 4. Edit: Use VisBug tools to make visual changes 5. Copy: PressC to copy the changes

`Output Format`

When you copy changes, you'll get output like:

`Visual Changes`

`File Location`


Track which file contains this component
Changes (2 style changes)

  • background-color: rgb(102, 126, 234) → rgb(214, 135, 92)
  • font-size: 16px → 24px
Updated CSS

css
button.btn {
  background-color: rgb(214, 135, 92);
  font-size: 24px;
}


Updated HTML

html


---
Tracked with React Grab VisBug Copy
Example: Giving Changes to AI
Copy the output and paste to your AI:
> I changed the button background color to rgb(214, 135, 92) and increased 
> the font size to 24px. Please apply these changes to the actual codebase.
>
> Here are the changes:
>
> [PASTE THE OUTPUT FROM VISBUG COPY]
Keyboard Shortcuts

| Shortcut | Action | |----------|--------| |Cmd/Ctrl + C| Activate React Grab | |T| Track selected element | |C| Copy visual changes | |X | Clear tracked changes |

`API`

`$3`

`javascript // Get the global API const api = window.__REACT_GRAB_VISBUG_COPY__;

// Track an element manually api.track(element);

// Get all tracked elements const elements = api.getTrackedElements();

// Clear all tracked changes api.clear();`

`Project Structure`

`react-grab-visbug-copy/ ├── src/ │ └── client/ │ └── standalone.ts # Main source code ├── dist/ │ └── client/ │ ├── standalone.js # ES module build │ └── standalone.cjs # CommonJS build ├── examples/ │ └── web/ │ └── with-visbug-extension.html # Demo page ├── package.json └── README.md``

Requirements

- Chrome browser with VisBug extension installed
- React Grab library
- Modern browser with Clipboard API support

Use Cases

$3

Include visual change diffs in PR descriptions to show what was modified.

$3

Describe visual changes to AI and let it apply them to your codebase.

$3

Track visual changes during design iteration and document them.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE for details.

Credits

- VisBug - Open source web design debug tools
- React Grab - Select context for coding agents

---

⭐ Star this repo if it helps you!

React Grab VisBug Copy

Track visual edits made with VisBug and copy them with file paths to give to AI agents.

!React Grab VisBug Copy

What is this?

This tool combines VisBug's visual editing capabilities with React Grab's selection system to help you:

1. 🎨 Visually edit any element on a page (colors, fonts, spacing, etc.)
2. 📍 Track the changes you made
3. 📋 Copy the changes as CSS + HTML to give to AI agents

Installation

$3

``bash npm install react-grab-visbug-copy

`or`


pnpm add react-grab-visbug-copy

$3

`bash

`Clone or download this repository`


git clone https://github.com/jacksonkasi1/react-grab-visbug-copy.git


Framework Integration
$3

Add this to your app/layout.tsx:

`tsx import { Script } from "next/script";

`$3`

Add this to your pages/_document.tsx:

`tsx import { Html, Head, Main, NextScript } from "next/document"; import Script from "next/script";

$3

Add this to your index.html in the :

`html`

Or import in your main entry file:

`tsx // src/main.tsx or src/main.jsx if (process.env.NODE_ENV === "development") { import("react-grab"); import("react-grab-visbug-copy"); }

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

const root = ReactDOM.createRoot(document.getElementById("root")!); root.render( );`

`$3`

Add to your webpack config or HTML template:

`html`

Or use dynamic import in your entry file:

`javascript if (process.env.NODE_ENV === "development") { import("react-grab"); import("react-grab-visbug-copy"); }`

`$3`

`html


Live Examples
Try these interactive examples to see VisBug Copy in action:
| Example | Description | Demo |
|---------|-------------|------|
| 01-basic-button.html | Simple button with hover effects | Click the button, edit styles with VisBug |
| 02-card-component.html | Card UI components | Edit cards with images and text |
| 03-navigation-bar.html | Navbar and hero section | Edit navigation and CTA buttons |
| 04-form-elements.html | Form inputs and buttons | Edit form styling and focus states |
$3

`bash

`Clone the repository`


git clone https://github.com/jacksonkasi1/react-grab-visbug-copy.git
Open any example in your browser

open examples/web/01-basic-button.html
or

cd examples/web && python3 -m http.server 8080
Then visit http://localhost:8080/01-basic-button.html


How It Works

`Output Format`

When you copy changes, you'll get output like:

`Visual Changes`

`File Location`


Track which file contains this component
Changes (2 style changes)

  • background-color: rgb(102, 126, 234) → rgb(214, 135, 92)
  • font-size: 16px → 24px
Updated CSS

css
button.btn {
  background-color: rgb(214, 135, 92);
  font-size: 24px;
}


Updated HTML

html


---
Tracked with React Grab VisBug Copy
Example: Giving Changes to AI
Copy the output and paste to your AI:
> I changed the button background color to rgb(214, 135, 92) and increased 
> the font size to 24px. Please apply these changes to the actual codebase.
>
> Here are the changes:
>
> [PASTE THE OUTPUT FROM VISBUG COPY]
Keyboard Shortcuts

| Shortcut | Action | |----------|--------| |Cmd/Ctrl + C| Activate React Grab | |T| Track selected element | |C| Copy visual changes | |X | Clear tracked changes |

`API`

`$3`

`javascript // Get the global API const api = window.__REACT_GRAB_VISBUG_COPY__;

// Track an element manually api.track(element);

// Get all tracked elements const elements = api.getTrackedElements();

// Clear all tracked changes api.clear();`

`Project Structure`

Requirements

- Chrome browser with VisBug extension installed
- React Grab library
- Modern browser with Clipboard API support

Use Cases

$3

Include visual change diffs in PR descriptions to show what was modified.

$3

Describe visual changes to AI and let it apply them to your codebase.

$3

Track visual changes during design iteration and document them.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT License - see LICENSE for details.

Credits

- VisBug - Open source web design debug tools
- React Grab - Select context for coding agents

---

⭐ Star this repo if it helps you!