React-CodeBridge - VS Code Extension
Click any UI element in your browser → Instantly jump to its React source code in VS Code.
Stop searching for component files manually. Click once in your browser, and VS Code opens the exact component file with the element highlighted.
Quick Start
1. Install This Extension
From VS Code Marketplace:
- Open VS Code Extensions (
Cmd/Ctrl + Shift + X)
- Search for "React-CodeBridge"
- Click Install
Or install manually:
code --install-extension dist/react-codebridge-1.2.3.vsix
2. Install Browser Extension
You also need the browser companion:
Chrome/Edge: Install from Chrome Web Store
Firefox: Install from Firefox Add-ons
3. Start Using It
- Open your React project in VS Code
- Run your dev server (
npm run dev)
- Open your app in browser
- Click the React-DomPicker extension icon
- Click any element → VS Code opens the file instantly
What's New in v1.2.3
- Next.js 16 App Router and React Server Components support
- Walkthrough on first install with setup instructions
- Optional 100% accuracy mode via
code-inspector-plugin
- Press
Esc in the browser to deactivate the picker when it's on
- Fixed: Server Component clicks now open the correct file on Turbopack
- Fixed: clicks on elements inside
.map() loops resolve correctly
- Fixed: text containing
&, <, or > no longer opens the wrong line
- Fixed:
<Link> clicks inside Server Components now resolve correctly
Settings
Most users won't need to change anything, but these settings are available:
Access: Preferences → Settings → Search "React-CodeBridge"
| Setting |
Default |
When to Change |
port |
51234 |
If port is already in use |
showNotifications |
false |
If you want popup confirmations |
maxFilesToScan |
500 |
For very large projects (1000+ components) |
maxScanLines |
500 |
For files with very long components |
Troubleshooting
Extension Not Working?
Quick checks:
- Browser extension is installed and active (colored icon)
- Your app is on
localhost or 127.0.0.1 (not production domain)
- Running in development mode (not production build)
- VS Code status bar shows "React Bridge: ON"
Wrong Files Opening (React 19 / Next.js)?
React 19 removed some internal metadata we rely on, so the default
accuracy on React 19 / Next.js projects is 70 to 90 percent.
For 100% accuracy on every click, install code-inspector-plugin
in your project. The first-install walkthrough has the setup snippets
for Next.js and Vite.
To improve accuracy without the plugin:
- Increase
maxFilesToScan in settings (try 1000)
- Add unique
id or className props to components
- Check Output channel for match info:
View → Output → React-CodeBridge
Connection Issues?
HUD shows "Not Connected":
- Check VS Code Output panel:
View → Output → Select "React-CodeBridge"
- Verify port 51234 isn't blocked by firewall
- Try reloading VS Code:
Cmd/Ctrl + R
Supported Projects
Frameworks:
- React 16.8+ (all versions including React 19)
- Next.js (all versions)
- Vite, Create React App, Remix, Gatsby
Languages:
- TypeScript (.tsx)
- JavaScript (.jsx)
Styling:
- Works with Tailwind, ShadCN, styled-components, CSS Modules, etc.
Privacy
- 100% local - Everything runs on your machine
- No tracking - We don't collect any data
- No internet required - Works completely offline
- Localhost only - Won't activate on production sites
Your code never leaves your computer.
Need Help?
Click any UI element in your browser to jump to its source code in VS Code.
