Install

npx rune-grab init

This adds a snippet to your app's entry file (e.g. src/main.tsx). Make sure it ends up in the file where your app renders. It only loads in development, nothing ships to production.

Run your dev server and press Cmd+Shift+G to start grabbing.

How it works

A small floating menu appears at the bottom of your page during development. It has two modes:

Screenshot — drag a rectangle to capture a region as a screenshot with context.

Inspect — hover over any element to see its component name and file path. Click it, optionally type a comment, and press Enter to send.

Everything is copied to your clipboard. On localhost, rune-grab auto-detects React, Vue, and Svelte components with file paths and line numbers.

Auto-paste (optional)

By default, grabs go to your clipboard and you paste manually. If you want rune-grab to automatically switch to Claude, Cursor, or Codex and paste for you:

{
  "scripts": {
    "dev": "rune-grab serve & your-dev-command"
  }
}

Then flip the auto-paste toggle in the floating menu. macOS only.

Configuration (optional)

Everything works out of the box. If you want to change the shortcut, default target, or other behavior, call init() in your code:

import { init } from 'rune-grab'

init({
  shortcut: 'Meta+Shift+K',
  target: 'claude',
  skipComponents: ['StyledButton']
})

| Option | Type | Default | Description | |--------|------|---------|-------------| | shortcut | string | 'Meta+Shift+G' | Keyboard shortcut | | target | TargetApp | 'clipboard' | Default target: clipboard, claude, cursor, codex, claude-code | | showTargetPicker | boolean | true | Show target picker in menu | | maxStackDepth | number | 3 | Component stack trace depth | | skipComponents | string[] | [] | Component names to ignore | | onGrab | (result) => void | — | Callback on grab | | onToggle | (active) => void | — | Callback on toggle |

Uninstall

npx rune-grab remove

This removes the injected snippet from your project and uninstalls the package in one step.

License

MIT