React-DomPicker

Name: React-DomPicker
Rating: 5 (6 reviews)
Author: dev.odyssey

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

As of June 2026, React-DomPicker has 542 users and a 5.00/5 rating from 6 reviews in the Developer Tools category.

dev.odyssey Developer Tools

Chrome Web Store ↗.crx

Users+36.2%

542

Rating0%

5.00

6 reviews

Reviews0%

Version

1.2.3

Manifest V3

90-day change · In the last 90 days this extension 1 version update.

History

10 snapshots

Tracking since Apr 1, 2026.

View as table

Date	Users	Rating	Reviews	Version
Apr 1, 2026	398	5.00	6	1.2.2
Apr 19, 2026	393	5.00	6	1.2.2
Apr 24, 2026	436	5.00	6	1.2.3
May 1, 2026	449	5.00	6	1.2.3
May 8, 2026	460	5.00	6	1.2.3
May 12, 2026	468	5.00	6	1.2.3
May 18, 2026	488	5.00	6	1.2.3
May 24, 2026	514	5.00	6	1.2.3
May 31, 2026	536	5.00	6	1.2.3
Jun 6, 2026	534	5.00	6	1.2.3
Now	542	5.00	6	1.2.3

Changelog

Apr 19, 2026

description

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. ⚡

React-DomPicker connects your browser to VS Code. Click any element in your React app and VS Code opens the exact source file at the matching JSX node.

How it works

1. Install the companion VS Code extension (React-CodeBridge):
https://marketplace.visualstudio.com/items?itemName=RajithaDisanayaka.react-codebridge
2. Install this Chrome extension
3. Run your React app on localhost
4. Click the toolbar icon to activate the picker
5. Click any element on the page

Features

- One-click navigation from browser to source code
- Hover to outline elements
- Shift+Click to select the parent element
- Esc to turn the picker off
- Ctrl+Shift+P (Cmd+Shift+P on Mac) to toggle from the keyboard
- Floating status indicator on the page

Works with

- React 16.8, 17, 18, 19
- Next.js (App Router and Pages Router, including React Server Components)
- Vite, Create React App, Remix
- TypeScript and JavaScript
- Tailwind, ShadCN, Material UI, styled-components, CSS Modules

Requires

- React-CodeBridge VS Code extension installed
- A React dev build running on localhost or 127.0.0.1

Privacy

- Runs entirely on your machine
- No data collection, no analytics, no external servers
- Activates only on localhost and 127.0.0.1

100% accuracy mode (optional)

For pixel-perfect click-to-code on every element, install code-inspector-plugin in your project config. React-DomPicker reads its output automatically. Useful for Next.js projects with React Server Components, i18n, or computed text.

Permissions & access

Permissions: activeTabscriptingstorage
Host access: http://localhost/*, http://127.0.0.1/*, https://localhost/*, https://127.0.0.1/*

Screenshots

About