solid-grab

Select context for coding agents directly from your SolidJS app.

solid-grab is a dev-mode tool for SolidJS that lets you hold a key, hover any element in your running app, and click to copy its full context — source file, line number, component hierarchy — ready to paste into Cursor, Claude Code, or any AI coding agent.

Inspired by react-grab by Aiden Bai.

How it works

1. Build time: A Vite plugin injects data-solid-source and data-solid-component attributes onto your JSX elements during compilation
2. Runtime: An overlay activates when you hold a modifier key — hover to highlight, click to grab
3. Output: The full context (element, source location, component tree) is copied to your clipboard or sent to an agent via WebSocket

Quick start

npm install solid-grab --save-dev

1. Add the Vite plugin

// vite.config.ts
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
import solidGrab from "solid-grab/vite";

export default defineConfig({
  plugins: [
    solidGrab(),   // ← must come BEFORE vite-plugin-solid
    solid(),
  ],
});

That's it. The plugin auto-injects the runtime in dev mode. No code changes needed.

2. Use it

1. Run your dev server (npm run dev)
2. Hold Alt (or Option on Mac)
3. Hover over any element — you'll see a blue highlight with component info
4. Click to copy the full context to your clipboard
5. Paste into your AI agent prompt

What gets copied

--- solid-grab context ---

Element: <button class="btn btn-primary">
Source:  src/components/Counter.tsx:24:8

Component tree (innermost → outermost):
  <Counter /> → src/components/Counter.tsx:12:1
  <App /> → src/App.tsx:8:1

HTML:
<button class="btn btn-primary" data-solid-source="src/components/Counter.tsx:24:8">Count: 5</button>

--- end solid-grab context ---

Configuration

Vite plugin options

solidGrab({
  // Source paths relative to the project root (default: "project-root")
  // Use "system-root" for full absolute paths.
  pathMode: "project-root",

  // Inject data-solid-source attributes (default: true)
  jsxLocation: true,

  // Inject data-solid-component attributes (default: true)
  componentLocation: true,

  // Auto-import the runtime in dev mode (default: true)
  autoImport: true,
})

Paths use Vite's resolved root by default. Shared files outside that directory use ../ paths instead of falling back to full system paths. This keeps source locations short in both the context and its HTML snippet.

For a monorepo with Vite rooted at apps/web, set projectRoot: "../.." to use repository-relative paths such as packages/ui/src/primitives.tsx:445:13. projectRoot also accepts an absolute directory. To include full absolute paths, use solidGrab({ pathMode: "system-root" }). Restart Vite after changing these options.

Runtime options

If you want to customize the runtime behavior, disable autoImport and initialize manually:

// src/index.tsx
import { initSolidGrab } from "solid-grab";

if (import.meta.env.DEV) {
  initSolidGrab({
    // Modifier key to hold (default: "Alt")
    key: "Alt",

    // Show toast on copy (default: true)
    showToast: true,

    // Show the standalone badge (default: true)
    showBadge: true,

    // WebSocket URL for agent bridge
    agentUrl: "ws://localhost:4567",

    // Custom callback
    onGrab(context) {
      console.log("Grabbed:", context);
      // Return false to prevent clipboard copy
    },
  });
}

Agent integration

Clipboard (default)

Just paste the copied context into any AI chat — Claude, ChatGPT, Cursor's chat, etc.

WebSocket bridge

For a tighter loop, solid-grab can send context directly to an agent over WebSocket:

initSolidGrab({
  agentUrl: "ws://localhost:4567",
});

You'll need to run a small bridge server alongside your dev server. (A @solid-grab/claude-code package is planned.)

How it differs from react-grab

| | react-grab | solid-grab | |---|---|---| | Framework | React | SolidJS | | Source mapping | React Fiber tree (via bippy) | Build-time attribute injection | | Component detection | Runtime fiber walking | Build-time data-solid-component attrs | | Why different | React has a runtime component tree | Solid compiles components away |

React Grab hooks into React's private Fiber internals at runtime to walk the component tree. Solid doesn't have a Fiber tree — components are compiled into direct DOM operations and disappear at runtime. So solid-grab takes a build-time approach: the Vite plugin annotates JSX with source metadata before Solid's compiler runs, preserving the mapping through compilation.

API

initSolidGrab(options?)

Initialize the runtime overlay. Called automatically on import unless autoImport is disabled.

destroySolidGrab()

Tear down the overlay and event listeners. Useful for HMR cleanup.

inspect(element: HTMLElement): GrabbedContext

Programmatically inspect any DOM element and get its full context.

setBadgeVisible(visible: boolean)

Show or hide the standalone badge without changing grab behavior.

setPicking(picking: boolean)

Start or stop persistent click selection. While enabled, click an element to copy/send context without holding the activation key. Escape cancels; a successful click stops persistent picking and suppresses the clicked element's default navigation.

status(): SolidGrabStatus

Returns a serializable snapshot: { initialized, picking, badgeVisible, key }.

subscribe(listener): () => void

Subscribe to runtime status changes. Returns an unsubscribe function.

window.__SOLID_GRAB__

Global API for extensibility:

• .init(options) — same as initSolidGrab
• .destroy() — same as destroySolidGrab
• .inspect(el) — same as inspect
• .setBadgeVisible(visible) — same as setBadgeVisible
• .setPicking(picking) — same as setPicking
• .status() — same as status
• .subscribe(listener) — same as subscribe

Requirements

• SolidJS >= 1.7
• Vite >= 4.0
• Dev mode only (all code is stripped in production)

License

MIT