Jump from Browser to Code in Seconds

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

📦 Install Chrome Extension (Coming Soon) 💻 Install VS Code Extension
Free & Open Source
Works Offline
Localhost Only
$ npm run dev
→ Local: http://localhost:3000
🎯 React-DomPicker: Active
Click elements → Jump to code

Powerful Features for Rapid Development

Everything you need to navigate your React codebase with lightning speed

🖱️

Click to Navigate

Simply click any element in your browser to instantly jump to its React component in VS Code. No searching, no guessing.

⚛️

React Fiber Aware

Leverages React Fiber internals to accurately map DOM elements to their source components, even in complex component trees.

✨

Visual Highlighting

Beautiful blue outline highlights elements as you hover, with smooth animations and visual feedback on selection.

⌨️

Keyboard Shortcuts

Toggle with Ctrl+Shift+P (Cmd+Shift+P on Mac). Shift+Click to select parent elements. Esc to close HUD.

🔌

WebSocket Connection

Real-time communication between browser and VS Code via Socket.IO. Auto-reconnects if connection drops.

🎨

Tailwind + ShadCN

Optimized for modern React stacks. Works perfectly with Tailwind CSS, ShadCN UI, and other component libraries.

How It Works

Get started in under 5 minutes

📦
1

Install Extensions

Install React-DomPicker Chrome extension and React-CodeBridge VS Code extension. Both are free.

🎯
2

Activate & Click

Click the extension icon to activate. Hover over any element and click to select it.

⚡
3

Jump to Code

VS Code instantly opens the exact file and line where that component is defined. Start coding!

Works with your favorite stack

⚛️ 💙 🎨 ▲ ⚡ 💻 🌐

Quick Installation

Two extensions working together in perfect harmony

🌐

Chrome Extension

React-DomPicker

1

Open Chrome and go to chrome://extensions/

2

Enable "Developer mode" in the top right

3

Click "Load unpacked" and select the extension folder

4

Pin the extension to your toolbar for easy access

Download for Chrome (Coming Soon)
💻

VS Code Extension

React-CodeBridge

1

Open VS Code Extensions panel (Ctrl+Shift+X / Cmd+Shift+X)

2

Search for "React-CodeBridge"

3

Click "Install" and wait for activation

4

Open your React project folder - you're ready!

Install on VS Code
💡

Requirements

  • React application running on localhost or 127.0.0.1
  • VS Code with React project folder open
  • Both extensions installed and active
  • WebSocket connection on port 51234 (automatically handled by VS Code extension)

See It In Action

Watch how React-DomPicker accelerates your development workflow

To add your demo video, replace the placeholder with your YouTube embed or upload a GIF

Get Support

We're here to help you get the most out of React-DomPicker

📚

Documentation

Read the full documentation, explore code examples, and learn advanced features.

View on GitHub →
🐛

Report Issues

Found a bug or have a feature request? Let us know on GitHub Issues.

Report Issue →
💝

Contribute

React-DomPicker is open source. Contributions, stars, and feedback are welcome!

View Source →

Frequently Asked Questions

Does it work with TypeScript?

Yes! React-DomPicker works seamlessly with TypeScript projects. It extracts source information from React Fiber which includes both .jsx and .tsx files.

Can I use it on production sites?

No, React-DomPicker only works on localhost and 127.0.0.1 for security reasons. It's designed exclusively for local development environments.

Which frameworks are supported?

React-DomPicker works with any React-based framework including Create React App, Next.js, Vite, Remix, and more. As long as your app uses React, it will work!

Is my data safe?

Absolutely. All communication happens locally between your browser and VS Code via localhost WebSocket. No data is sent to external servers.