dom-grab

DOM element inspector for AI coding assistants. Select any element and copy its context (selector, path, attributes, HTML, styles) in AI-friendly format.

Install

npm install dom-grab

Usage

Script tag (auto-initializes)

<script src="https://unpkg.com/dom-grab"></script>

Hold Cmd+C (Ctrl+C on Windows/Linux) for 200ms to enter selection mode, click an element to copy. Quick Cmd+C still works for normal copy.

ES Module

import { init } from 'dom-grab';

const api = init({
  hue: 320,             // theme color (0-360)
  showCrosshair: true,
  maxHtmlLength: 2000,
  includeStyles: true,
  keyHoldDuration: 200, // ms to hold before activating
  onCopy: (context) => console.log('Copied:', context)
});

// Manual control
api.activate();
api.deactivate();
api.destroy();

Disable auto-init

<script src="dom-grab.global.js" data-enabled="false"></script>

Output format

<selected_element>
## Page
https://example.com/page

## Element
button#submit.btn.primary

## Framework Component
React: <SubmitButton>

## DOM Path
main > form > button#submit.btn.primary

## Attributes
id="submit"
class="btn primary"
type="submit"

## Accessibility
role: button
aria-label: Submit form

## HTML
```html
<button id="submit" class="btn primary" type="submit">Submit</button>

Key Styles

display: flex padding: 12px 24px background: rgb(59, 130, 246)

Recent Console Errors

• TypeError: Cannot read property 'x' of undefined at app.js:42 </selected_element>

Framework Component, Accessibility, and Recent Console Errors sections only appear when relevant.

## Acknowledgments

Inspired by [react-grab](https://github.com/aidenybai/react-grab) by Aiden Bai. dom-grab is a framework-agnostic alternative for non-React apps (Razor Pages, vanilla JS, etc.).

## License

MIT