React 19 Compatible - The Only Tool That Still Works!

Jump from Browser to Code in Seconds

Click any UI element to instantly jump to its React source code in VS Code.

While other tools broke with React 19's internal changes, DOM→Code Bridge keeps working with its 3-strategy fallback architecture. React 16-19 fully supported.

Chrome Chrome Extension Firefox Firefox Extension VS Code VS Code Extension

v1.2.2 - Both extensions required to work together

React 16-19 (100% → 60-90% accuracy)
3 Fallback Strategies
Chrome, Firefox & Edge
100% Local & Secure
React-DomPicker - Jump from browser to code in seconds | Product Hunt
$ 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

3-Strategy Fallback System

Strategy 1: Direct Fiber mapping (100% accuracy). Strategy 2: Component hierarchy search (80-90%). Strategy 3: Multi-factor fuzzy matching (60-90%). Always finds your code.

React 19 Compatible

The only tool that survived React 19's _debugSource removal. Works with React 16, 17, 18, and 19 through intelligent fallback strategies.

Precise JSX Highlighting

AST-based parsing highlights the exact JSX element (opening to closing tag) in VS Code, not just the line. Powered by ts-morph.

Confidence Indicators

Know match quality with HIGH/MEDIUM/LOW confidence scores. 8-factor algorithm analyzes tag, ID, classes, text, ARIA, context, siblings, and URL.

Multi-Browser Support

Available for Chrome, Firefox, and Edge. Real-time WebSocket communication (port 51234) with auto-reconnect and exponential backoff.

Large Codebase Ready

Optimized for 500+ component projects. Works with SSR frameworks (Next.js, Remix). Perfect for React + Tailwind + ShadCN stacks.

How It Works

Get started in under 5 minutes

1

Install Extensions

Install both the Chrome and VS Code extensions from their respective stores.

2

Click Any Element

Activate the extension and click on any UI element in your browser.

3

Jump to Code

VS Code opens the exact file and highlights the component. Start coding!

Works with your favorite stack

React
TypeScript
Tailwind CSS
Next.js
Vite
VS Code
Chrome
Firefox
React
TypeScript
Tailwind CSS
Next.js
Vite
VS Code
Chrome
Firefox

Quick Installation

Choose your browser extension + VS Code extension (both required)

VS Code

VS Code Extension (Required)

React-CodeBridge v1.2.2 - Install this first

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 Marketplace

Choose Your Browser Extension

Chrome

Chrome / Edge

v1.2.2

  • ✓ Visit Chrome Web Store
  • ✓ Click "Add to Chrome"
  • ✓ Pin to toolbar
  • Also works on Edge, Brave, etc.
Install for Chrome
Firefox

Firefox

v1.2.2

  • ✓ Visit Firefox Add-ons
  • ✓ Click "Add to Firefox"
  • ✓ Confirm installation
  • Official Firefox support
Install for Firefox
Edge

Edge

v1.2.2

  • ✓ Use Chrome Web Store
  • ✓ Edge allows Chrome extensions
  • ✓ Click "Get"
  • Full Chromium compatibility
Install for Edge

Requirements

  • React application (v16, 17, 18, or 19) 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)
  • Development build of React (production builds lack debugging metadata)

See It In Action

Watch how React-DomPicker accelerates your development workflow

Get Support

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

VS Code

VS Code

React-CodeBridge v1.2.2

Install Extension →
Chrome

Chrome

React-DomPicker v1.2.2

Install Extension →
Firefox

Firefox

React-DomPicker v1.2.2

Install Extension →

Product Hunt

Share your feedback!

View on Product Hunt →

Frequently Asked Questions

Does it work with React 19?

Yes! DOM→Code Bridge is the ONLY click-to-component tool that still works with React 19. While other similar tools broke when React removed _debugSource, our 3-strategy fallback architecture keeps working with 60-90% accuracy. React ≤18 maintains 100% accuracy.

How accurate is it without _debugSource?

Strategy 1 (Fiber mapping): 100% accuracy for React ≤18. Strategy 2 (Component hierarchy): 80-90% accuracy. Strategy 3 (8-factor fuzzy matching): 60-90% accuracy for React 19. The system shows confidence indicators (HIGH/MEDIUM/LOW) so you know match quality.

Which browsers are supported?

Chrome, Firefox, Edge, Brave, and all Chromium-based browsers. We offer official extensions for Chrome (Web Store), Firefox (Add-ons), and Edge (via Chrome Web Store).

Does it work with TypeScript and SSR?

Yes! Works seamlessly with TypeScript (.tsx/.jsx files), Next.js, Remix, and other SSR frameworks. Optimized for large codebases with 500+ components. Perfect for React + Tailwind + ShadCN stacks.

Can I use it on production sites?

No, DOM→Code Bridge only works on localhost and 127.0.0.1 for security reasons. It's designed exclusively for local development environments.

Is my data safe?

Absolutely. All communication happens locally between your browser and VS Code via localhost WebSocket (port 51234). No data is sent to external servers. 100% local and private.