React-CodeBridge - VS Code Extension
Click any UI element in your browser to instantly jump to its React source code in VS Code.
React-CodeBridge works together with the React-DomPicker Chrome extension to create a seamless workflow for navigating from browser UI elements to their source code.
✨ What's New in v1.2.0
Enhanced Fuzzy Search with Multi-Factor Ranking!
This release dramatically improves source code matching accuracy:
- 🎯 Smarter Matching - New multi-factor ranking system with 8 weighted factors
- 📊 Confidence Scoring - See match quality (high/medium/low/very-low) in logs
- 🔍 Context-Aware - Uses surrounding elements, headers, and page context
- 🎨 Better Debugging - Output shows factors that contributed to each match
- 📈 Higher Accuracy - Especially for elements without unique IDs or in complex hierarchies
See CHANGELOG.md for complete details.
📢 Chrome Extension Status
⏳ Chrome Web Store Listing: Pending Review
Until the Chrome extension is approved, please download it manually from the GitHub release page:
👉 Download React-DomPicker Chrome Extension
Installation instructions are included in the release notes.
🎯 What Does This Extension Do?
Stop wasting time searching for component files! React-CodeBridge lets you click any element in your browser and instantly opens the exact React component file in VS Code.
Perfect for:
- ✅ Large React codebases with hundreds of components
- ✅ Working with component libraries (Tailwind, ShadCN, Material-UI)
- ✅ Navigating unfamiliar codebases
- ✅ Speeding up your development workflow
🚀 How to Use
Step 1: Install This Extension
- Open VS Code
- Go to Extensions (
Cmd/Ctrl + Shift + X)
- Search for "React-CodeBridge"
- Click Install
Step 2: Install Chrome Extension
You must also install the React-DomPicker Chrome extension:
Option 1 (Recommended when available): Install from Chrome Web Store (currently pending review)
Option 2 (Available now): Download from GitHub Releases and install manually:
- Download the
React-DomPicker.zip from the release page
- Extract the zip file to a folder on your computer
- Open Chrome and go to
chrome://extensions/
- Enable "Developer mode" (toggle in top-right corner)
- Click "Load unpacked"
- Select the extracted folder
- The extension is now installed and ready to use!
Step 3: Start Using It!
- Open your React project in VS Code
- Run your development server (
npm run dev)
- Open your app in Chrome
- Click the React-DomPicker extension icon in Chrome toolbar
- Click any element on your webpage
- VS Code automatically opens the source file!
That's it! The extension works automatically in the background.
✨ Features
- Instant Navigation - Click in browser, file opens in VS Code
- Accurate Targeting - Opens the exact component, not just the file
- Auto-Start - Extension starts automatically when you open VS Code
- Multiple Strategies - Finds your components even in complex projects
- Localhost Only - Secure, works only on your local development server
- No Configuration - Works out of the box with sensible defaults
⚙️ Settings
Access via: Settings → Search "React-CodeBridge"
| Setting |
Default |
What it does |
| Port |
51234 |
WebSocket server port |
| Show Notifications |
Off |
Show popup when files open |
| Detailed Logging |
On |
Extra logs for debugging |
Most users don't need to change anything!
🛠️ Supported Technologies
Frameworks
- React 16.8+, React 17, React 18
- Next.js
- Create React App
- Vite
Styling
- Tailwind CSS
- ShadCN UI
- styled-components
- CSS Modules
- Plain CSS/SCSS
Languages
- TypeScript (.tsx)
- JavaScript (.jsx)
❓ Troubleshooting
Extension Not Working?
Check these things:
- ✅ Chrome extension is installed and activated (icon should be colored)
- ✅ Your app is running on
localhost or 127.0.0.1
- ✅ You're running in development mode (
npm run dev, not production build)
- ✅ VS Code status bar shows "React Bridge: ON"
Files Not Opening?
Make sure:
- Your React app is in development mode (production builds don't work)
- You opened the project root folder in VS Code
- You clicked elements on localhost/127.0.0.1 pages only
Need More Help?
View detailed logs: View → Output → Select "React-CodeBridge"
Report issues: GitHub Issues
🔐 Privacy & Security
- ✅ 100% Local - Everything runs on your computer
- ✅ No Data Collection - We don't collect or send any data
- ✅ No Internet Required - Works completely offline (after installation)
- ✅ Localhost Only - Only works with local development servers
Your code never leaves your machine.
🎉 Start Using It Now!
- ✅ Install this VS Code extension
- ✅ Install React-DomPicker Chrome extension
- ✅ Run your React app in development mode
- ✅ Click any element in your browser
- ✅ Watch VS Code open the right file instantly!
⭐ Help Us Improve!
Enjoying React-CodeBridge? Your feedback helps us make it better!
Your reviews and ratings make a huge difference! Thank you for using React-CodeBridge! 🙏
