React Dompicker

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

Download Vs Code extension from here:
https://marketplace.visualstudio.com/items?itemName=RajithaDisanayaka.react-codebridge

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)
https://marketplace.visualstudio.com/items?itemName=RajithaDisanayaka.react-codebridge
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.

Click. Code. Done. ⚡

© 2025 Dev.Odyssey