vite-plugin-react-feedback

Visual annotation tool for React + Vite. Click any component in your running app, write what you want changed, then copy all annotations as structured text — ready to paste into Claude Code or any LLM.

Install

npm install vite-plugin-react-feedback

Setup

Add to your vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import reactFeedback from 'vite-plugin-react-feedback'

export default defineConfig({
  plugins: [
    react(),
    reactFeedback(),  // dev only — automatically disabled in production
  ],
})

Usage

1. Run npm run dev — your app works as normal
2. Press Ctrl+Shift+X to activate feedback mode
3. Hover over elements — component names and hierarchy are shown
4. Click an element — a text field appears
5. Write your feedback, press Enter
6. Repeat for as many elements as you want
7. Click the Feedback indicator (bottom right) to see all annotations
8. Click Copy All — structured text lands in your clipboard
9. Paste into Claude Code / ChatGPT / any LLM
10. Press Ctrl+Shift+X or Escape to exit

Options

reactFeedback({
  shortcut: 'ctrl+shift+x',  // customize the toggle shortcut
  maxAncestors: 3,            // max parent components shown in chain
})

Output Format

## UI Feedback (2 Annotations)

1. Card > Button (src/components/Card.tsx:28)
   → "Change color to primary blue"

2. Navbar (src/components/Navbar.tsx:15)
   → "Logo should be left-aligned, not centered"

How It Works

• Injects a lightweight overlay script via Vite's transformIndexHtml (dev only)
• Uses React's internal Fiber tree to resolve component names and source locations
• All UI lives in Shadow DOM — zero interference with your app's styles
• No changes to your application code required