feat: add "Copy as Image" plugin for LLM-friendly text-to-image clipboard copy

[aidenybai]

Summary

Adds a new "Copy as Image" context menu action that renders the grabbed text content into a compact PNG image and copies it to the clipboard. The image is designed to be parseable by LLMs while staying token-efficient (small pixel dimensions, minimal padding).

What it does

When a user selects "Copy as Image" from the context menu, the plugin:

1. Generates the same text snippets as the regular "Copy" action
2. Renders the text onto an HTML canvas using a compact 12px monospace font
3. Exports the canvas as a PNG blob
4. Wraps the blob as a named File using the component/element display name (e.g. TodoList.png)
5. Copies the image to the clipboard via the ClipboardItem API

Design decisions

• 12px monospace font at 15px line height — compact enough to minimize image dimensions (and therefore LLM image tokens) while remaining readable by vision models
• White background, black text — maximum contrast for OCR/vision parsing
• Minimal 8px padding — keeps the image tight
• Tabs expanded to 2 spaces — consistent rendering regardless of source formatting
• 1x resolution (no DPR scaling) — keeps pixel count low; LLMs don't need retina-quality rendering to parse text
• Named File object — the clipboard image is named after the component (componentName) or element tag (tagName), so paste targets that respect filenames will show a meaningful name

New files

File	Purpose
utils/render-text-to-image.ts	Canvas text rendering → PNG blob
utils/copy-image-to-clipboard.ts	Wraps blob as named File, clipboard write via ClipboardItem API
core/plugins/copy-image.ts	Plugin wiring as a context menu action

Constants added to constants.ts

• TEXT_IMAGE_FONT_SIZE_PX (12)
• TEXT_IMAGE_LINE_HEIGHT_PX (15)
• TEXT_IMAGE_PADDING_PX (8)
• TEXT_IMAGE_FONT_FAMILY ("monospace")
• TEXT_IMAGE_BACKGROUND_COLOR / TEXT_IMAGE_TEXT_COLOR
• TEXT_IMAGE_TAB_SIZE_SPACES (2)

Checks

• Build: passing
• Lint (oxlint): 0 warnings, 0 errors
• Typecheck (tsc --noEmit): passing
• Format (oxfmt): applied
• E2E tests (535 Playwright): all passing
• CLI tests (167 Vitest): all passing

  

---

Summary by cubic

Adds a “Copy as Image” action that turns grabbed text into a compact PNG and copies it to the clipboard. On modern clipboards, it writes text, HTML, and the PNG together to make pasting easier.

• New Features
  • Adds “Copy as Image” to the context menu and toolbar; uses the same text as “Copy”.
  • Renders text on canvas with 8px monospace, 10px line height, 4px padding; white background, black text; tabs expanded to 2 spaces.
  • Uses ClipboardItem to write text/plain, text/html, and image/png in one go; falls back to legacy copy with metadata when needed.

^{Written for commit b238633. Summary will update on new commits.}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
react-grab-website	Ready	Preview, Comment	Mar 24, 2026 0:27am

[pkg-pr-new]

Open in StackBlitz

@react-grab/cli

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cli@261

grab

npm i https://pkg.pr.new/aidenybai/react-grab/grab@261

@react-grab/amp

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/amp@261

@react-grab/claude-code

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/claude-code@261

@react-grab/codex

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/codex@261

@react-grab/copilot

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/copilot@261

@react-grab/cursor

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/cursor@261

@react-grab/droid

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/droid@261

@react-grab/gemini

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/gemini@261

@react-grab/opencode

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/opencode@261

react-grab

npm i https://pkg.pr.new/aidenybai/react-grab@261

@react-grab/relay

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/relay@261

@react-grab/utils

npm i https://pkg.pr.new/aidenybai/react-grab/@react-grab/utils@261

commit: b238633