React Yank

About

React Yank lets you grab any element on a webpage and copy its details to your clipboard - perfect for providing context to AI coding assistants.

FEATURES:
• Hold Cmd+C (Mac) or Ctrl+C (Windows) and hover to yank any element
• Quick Actions Palette - Choose what to copy: HTML, CSS selectors, test selectors
• Multi-Select Mode (Shift+M) - Select and copy multiple elements at once
• Smart Component Detection - Detects React, Vue, Angular, Svelte components
• Tailwind CSS Extraction - Extracts Tailwind classes from elements
• Test Selector Generator - Generates Playwright and Testing Library selectors
• Design Token Extraction - Colors, typography, spacing, borders
• Network Context - Shows API endpoints that provided the data
• Parent Chain View - See the full DOM hierarchy
• Snippet Library - Save and reuse frequently yanked elements

KEYBOARD SHORTCUTS:
• Cmd/Ctrl + C (hold) - Yank element under cursor
• Cmd/Ctrl + Shift + Y - Toggle extension on/off
• Shift + M - Enter multi-select mode
• Enter - Confirm multi-select
• Esc - Cancel

PERFECT FOR:
• Cursor IDE users
• Claude Code users
• GitHub Copilot users
• Any AI-assisted development workflow

OUTPUT FORMATS:
• JSON - Structured data format
• Markdown - Documentation-friendly
• Plain Text - Simple copy-paste

Based on React Grab by Aiden Bai.

Privacy: This extension runs entirely in your browser. No data is sent to external servers.