React-DomPicker

Click any UI element to instantly jump to its React source code in VS Code. Perfect for React + Tailwind + ShadCN projects.

React-DomPicker bridges your browser to VS Code. Click any button, card, or form in your React app—VS Code opens that file immediately with the line highlighted. No searching, no guessing. Why Install This? Save Time Stop hunting through file trees or grepping for class names. One click takes you straight to the code. Works Everywhere React 16.8+, React 18, TypeScript, JavaScript, Tailwind CSS, ShadCN UI, Next.js, Vite—if it's React, it works. Complete Privacy Everything runs on your computer. No data collection. No tracking. No external servers. How It Works 1. Install the companion VS Code extension (search "DOM Code Bridge" in VS Code extensions) 2. Install this Chrome extension 3. Run your React app on localhost 4. Click the extension icon 5. Click any element → VS Code opens the file Done. No configuration needed. Key Features • One-click navigation from browser to VS Code • Uses React Fiber for accurate component detection • Keyboard shortcut: Ctrl+Shift+P (Cmd+Shift+P on Mac) • Small floating icon shows connection status • Shift+Click to select parent components • Fully customizable in settings Perfect For • React developers with large codebases • Teams onboarding new members • Anyone using Tailwind CSS or component libraries • Developers tired of wasting time finding files Technical Requirements Works with: • React 16.8, 17, 18 (Hooks supported) • TypeScript and JavaScript • JSX/TSX files • Tailwind, ShadCN, Material-UI, and other UI libraries • Create React App, Vite, Next.js (dev mode) Requires: • VS Code with companion extension • React development build (not production) • Localhost development server Privacy Promise • No data collection • No analytics • No external servers • 100% local processing Your code never leaves your machine. Period. Before vs After Before: See element → Inspect → Copy class → Search 10 files → Find component → 5-10 minutes wasted After: Click element → VS Code opens → 1 second Save 2-5 hours daily. Stay in flow. Installation 1. Install VS Code extension (search "DOM Code Bridge" in VS Code marketplace) 2. Click "Add to Chrome" above 3. Run your React app on localhost 4. Click the extension icon in Chrome 5. Start clicking elements That's it! Troubleshooting Not connecting? Make sure the VS Code extension is installed and running. Check the VS Code status bar for "DOM Bridge: ON". Files not opening? Make sure you're using a React development build, not production. Development builds include the source mapping needed for accurate navigation. Elements not highlighting? Extension only works on localhost and 127.0.0.1. Make sure your development server is running locally. Real Impact Average developer searches for components 20-30 times per day. Each search takes 5-10 minutes manually. That's 2-5 hours wasted daily. React-DomPicker reduces each search to 1 second. Get back 10-25 hours per week. That's real productivity. Perfect for Large Teams New team members can navigate the codebase immediately without asking senior developers where components are located. Reduces onboarding time significantly. Transform your workflow. Install now. Justification for permissions activeTab: Required to inject DOM picker overlay into the current tab when users click the extension icon, enabling element selection and metadata extraction for code navigation. host_permission: Required to work only on localhost and 127.0.0.1 (local development servers). Extension intentionally does not work on any public websites - only on developer's own machine. remote code: No remote code is used. All code including socket.io-client is bundled locally. WebSocket connects only to localhost:51234 (user's VS Code), no external servers. scripting: Required to inject content script that creates element highlighting, captures click events, and displays connection status when users activate the extension. storage: Required to save user preferences locally (WebSocket URL, auto-activation, notifications, HUD position). All data stored locally, never transmitted externally. Click. Code. Done. ⚡ © 2025 Dev.Odyssey