1 click
Open the exact source line
Premium React source inspector
Trace the rendered UI
Jump straight back to the source.
react-find overlays the real interface, not component trees. Hover the element you care about, open the exact source line, or walk upward through ownership when the render path gets messy.
4 paths
React 18, React 19, Next/Webpack, Remote SSH
Why teams ship it
Made for the messy parts of real React debugging.
The site is now styled like a premium developer tool, but the product story stays practical: less guessing, faster source jumps, clearer ownership.
Open the exact source
Hold Command or Control, hover the real interface, and click to open the file and line that produced the current DOM node.
Inspect parent ownership
Right click the overlay to see the component ancestry and compare who owns the rendered output.
Fit every React stack
Support direct runtime mode for older React, a dedicated runtime entry for React 18, and source-attribute flows for Vite, Webpack, and Next.
Remote SSH ready
Pass protocol plus remoteServerName to jump into files even when the app is running over Remote SSH.
Made for dense interfaces
Cards, tables, layout shells, and deeply nested surfaces stay debuggable because the overlay maps what is rendered, not what you guess.
Quick Start
Choose the setup path that matches your app.
The docs focus on the highest-signal integrations so a team can copy, test, and onboard without digging through implementation details first.
Install
pnpm install react-find
Keep it in development only. Production builds stay clean.
Plugin mode
Add source attributes before init
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { vitePluginReactSource } from 'react-find/vite';
export default defineConfig({
define: {
'process.env': process.env,
},
plugins: [vitePluginReactSource(), react()],
});Runtime entry
Use the dedicated React 18 entry
import { init } from 'react-find/next';
init();Loader mode
Inject source-file-path during build
{
test: /\.(ts|tsx|js|jsx)$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
'@babel/preset-react',
'@babel/preset-typescript',
],
},
},
{
loader: require.resolve('react-find/webpack/webpack-react-source-loader'),
},
],
}Editor protocol
Jump into remote files too
import { init } from 'react-find/next';
init({
protocol: 'cursor',
remoteServerName: 'your-server-name',
});
Workflow
Three actions. No guessing.
The tool stays inside your normal UI and keeps the debugging loop short.
Install and initialize
Add react-find to development mode, then choose the runtime or build-time integration that matches the app.
Hover the real surface
Move across buttons, forms, cards, or nested shells until the exact rendered node is highlighted.
Open source or climb ownership
Left click opens the current source line. Right click gives you the parent stack when the render path needs more context.
Use the path that matches your runtime and build pipeline.
- React 17 and lower: direct runtime entry
- React 18: dedicated next runtime entry
- React 19 and higher: Vite plugin or Webpack loader
- Remote SSH: set protocol and remoteServerName
Bilingual docs, remote-friendly setup, and clear onboarding
This docs page ships with English and Chinese copy so you can share setup steps across local and remote teams without maintaining duplicate sites.
FAQ
Questions that come up before rolling it out to the team.
These answers cover the setup paths people hit most often during adoption.
Which React versions are supported? +
React 17 and lower can use the direct runtime entry. React 18 can use the next runtime entry. React 19 and higher should use the source-attribute plugin or loader path.
Does it work only in development? +
Yes. react-find is designed for local development and should only be initialized when your app is running in development mode.
Can I use another editor protocol? +
Yes. Pass protocol in init, for example cursor, or persist react_find_protocol in localStorage for repeated use.
What if my app runs over Remote SSH? +
Provide remoteServerName in init so the generated editor URL uses the vscode-remote style path format.
Ready to use it?