astro-grab

Visual element targeting for astro. Try it, hit Cmd/Ctrl+G

Get Started GitHub

(Try the demo on desktop)

Try It Now

Hold Cmd/Ctrl+G for 1 second to enter targeting mode
Click on any component on this page
Paste the copied code into the textarea below
Now your AI agent has better context for editing

agent@astro-grab

Clog: What's next on your plate?

Installation

1. Install Package

npm install astro-grab

Or use bun add astro-grab with Bun.

2. Add Integration

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { astroGrab } from 'astro-grab';

export default defineConfig({
  integrations: [
    astroGrab(),
  ],
});

/** Here are the options you can pass to `astroGrab()`
{
  enabled: true,        // Enable in dev mode
  holdDuration: 1000,   // Hold time in ms
  contextLines: 4,      // Lines around target
  hue: 30,              // Highlight color (orange)
  toolbar: true,        // Enable dev toolbar
}
*/

3. Start Dev Server

npm run dev

Toolbar appears in Astro dev mode.