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.2
Better Support for Large Projects and Server-Side Rendering!
This release improves accuracy for larger codebases:
- 📈 Large Project Support - Works with codebases of 500+ components
- 🌐 Server-Side Rendering - Better support for Next.js, Remix, and other SSR frameworks
- ⚙️ Configurable Limits - New settings to customize file scanning
- 🎯 Improved Matching - Better accuracy for complex projects and repeated components
- 📊 Smart Detection - Automatic detection and warnings for SSR apps
See CHANGELOG.md for complete details.
📢 Chrome Extension Status
✅ Chrome Web Store: Now Available!
Install the React-DomPicker Chrome extension from the Chrome Web Store:
👉 Install React-DomPicker from Chrome Web Store
🎯 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): Install from Chrome Web Store
- Go to React-DomPicker on Chrome Web Store
- Click "Add to Chrome"
- Confirm the installation
- The extension is now installed and ready to use!
Option 2 (Manual installation): If you have the extension files:
- Extract the extension files 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"
🔐 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! 🙏
