Grabim React overlay

Install and auto-mount Grabim in the app you are developing:

npx grabim@latest init

The initializer detects the project and existing package manager, then adds one development-only mount using the app's normal top-level client boundary. It works across common React frameworks and is safe to run again.

For coding agents, use the framework-neutral instructions printed by:

npx grabim@latest instructions

If automatic setup cannot identify a safe mount, it prints the same instructions so an agent can inspect the project and follow that framework's own standard client-only convention. For custom React setups, use the Grabim component from grabim, or import grabim/auto once from an existing browser entry.

Grabim adds a small launcher in the bottom-right corner. The rest of the page remains interactive. Its general toolbar can pause and resume host-page CSS animations, Web Animations, and playing audio or video without freezing Grabim itself, making transient states easier to capture and annotate. Motion that was already paused stays paused when the page resumes. Start a capture, drag over one area, then add numbered shapes and comments. The React picker, style inspector, and element mover all start at the same deepest React-backed host element under the cursor and share latched target traversal: each Cmd press on macOS or Ctrl press on Windows climbs exactly one DOM parent, while Option/Alt advances to the next element child of that same parent. Shift+Cmd/Ctrl or Shift+Option/Alt returns to the previous target. Traversal history is held only while a tool is active, capped at 32 targets, and reset when the pointer moves onto another element.

The style inspector previews edits against the live page. Its popover leads with inline declarations and same-origin CSS rules attached directly to the selected element; inherited typography and other ancestor declarations stay in a collapsed section. Stylesheet rules are read-only provenance: changing a class or Tailwind utility value creates an element-scoped preview override, so the shared rule and every other instance remain untouched. Direct and inherited sources are editable, and Add property can create a new scoped value. Cancel restores the element exactly, while Confirm saves only valid diffs under the image-free Style modifications section with React context. Confirmed declaration changes can be reopened from session details, edited against the saved element without picking it again, and updated in place.

Copied feedback and detailed ZIP exports describe those scoped values as visual intent rather than literal inline patches. The included implementation guidance asks the coding agent to use the project’s native styling approach—existing Tailwind utilities, design tokens, component variants, CSS Modules, or local selectors—while protecting shared utilities and nearby instances.

The mover can drag the selected element into a new live-tree position, preview the destination container’s real layout immediately, and save the React context plus movement under Style modifications. Press G once to switch from Move mode to Fuse mode, then drag over another component to preview both elements wrapped in a new container; press G again to return to Move mode. In Fuse mode, Cmd/Ctrl and Option/Alt still navigate through parent and sibling targets, and adding Shift returns to the previous target. Fuse mode persists through Try again and resets when the mover is saved, cancelled, or reopened. The wrapper defaults to <div> and can use another supported semantic tag through mergeContainerTag. Before/after insertion lines use a snap band so preview reflow cannot make a boundary flicker between adjacent sections. The mover also supports a Tab/Enter keyboard workflow, restores invalid drops, and can undo a live move or grouping when its Style record is removed. Captures preserve the current viewport state, including fixed and sticky elements plus independently scrolled containers. Download the detailed session as a single ZIP containing a root README.md agent guide, structured Markdown, JSON, and annotated PNGs, or copy a text-only handoff with the feedback and React picker context.

Props

<Grabim
  position="bottom-right"
  accent="oklch(0.815 0.166 78.424)"
  defaultOpen={false}
  mergeContainerTag="div"
  onCopy={(markdown) => console.log(markdown)}
/>

mergeContainerTag accepts div, section, article, aside, nav, main, header, or footer.