Developer markup for React apps inspired by react-grab, built for quick notes, sketch callouts, and full-page screenshot capture.

• right-edge toggleable overlay toolbar
• ink tool: click to type directly inside the final purple note bubble, drag to sketch
• arrow and box tools for callouts
• full-page screenshot copied to the clipboard
• toolbar excluded from captures and annotations cleared after a successful copy

Until this is published to npm, install straight from GitHub:

bun add github:kbdevs/react-draw

import { ReactDrawDevtool } from "react-dev-draw";

export function Root() {
  return (
    <ReactDrawDevtool>
      <App />
    </ReactDrawDevtool>
  );
}

Start your app, toggle the rail on the right edge, annotate the page, then copy a full-page screenshot.

Wrap your app with ReactDrawDevtool anywhere near the root so it can portal the overlay to document.body.

• Ink: click to place a note and type directly inside the final bubble, drag to draw freehand
• Arrow: drag to create directional callouts
• Box: drag to create outlined callout boxes
• Capture: copy the whole page as a PNG and clear the current annotations

• The toolbar, hit layer, and active text input stay out of screenshots
• Open note edits are committed before capture starts
• Successful capture collapses the toolbar back to its minimized state
• Screenshot capture uses html2canvas and the Clipboard API with a PNG download fallback
• Clipboard image writes work best on localhost or HTTPS

Run the local playground to try the overlay on a long, scrollable page:

bun install
bun run dev

Open http://127.0.0.1:4173/.

bun install
bun run test
bun run build