React Dompicker

👥 553 users

📦 v1.2.3

💾 91.24KiB

📅 2026-04-16

View on Chrome Web Store

Chrome will indicate if you already have this installed.

Overview

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.