Instantly locate any React component's source code with a single keystroke. Hover + Cmd+Shift+O = your editor opens the exact file and line.
npm install react-source-lensimport { useReactSourceLens } from 'react-source-lens';
// Basic usage
useReactSourceLens();
// With VS Code integration (recommended)
useReactSourceLens({
projectRoot: '/path/to/your/project' // Absolute path to your project root
});Add the Babel plugin to your .babelrc or babel.config.js:
{
"plugins": [
"react-source-lens/babel-plugin"
]
}Or in JavaScript config:
module.exports = {
plugins: [
'react-source-lens/babel-plugin'
]
};- The overlay will be visible by default when the hook is active
- Hover over any React component in your app
- Press
Cmd+Shift+O(Mac) orCtrl+Shift+O(Windows/Linux) to inspect source location - Press
Cmd+Shift+L(Mac) orCtrl+Shift+L(Windows/Linux) to toggle the overlay on/off
When source information is found, a modal popup will appear with:
- File and line number information
- "Open in VS Code" button to jump directly to the component in your editor
- "Copy Path" button to copy the file path to clipboard
- Close button (×) or press Escape to dismiss
The modal automatically disappears after 10 seconds.
React Source Lens uses React's internal fiber nodes and debug information to locate the source code of components. It works best when:
- React is in development mode
- Components have debug source information (enabled by default in Create React App and Vite)
- The Babel plugin is configured to add source attributes to JSX elements
Next.js uses SWC by default, which doesn't support custom Babel plugins. To use React Source Lens with Next.js, you need to configure it to use Babel instead.
-
Create a
.babelrcfile in your Next.js project root:{ "presets": ["next/babel"], "plugins": ["react-source-lens/babel-plugin"] } -
Create a Client Component to initialize React Source Lens:
// components/ReactSourceLensProvider.tsx 'use client'; import { useReactSourceLens } from 'react-source-lens'; export function ReactSourceLensProvider() { useReactSourceLens({ projectRoot: '/absolute/path/to/your/nextjs/project' }); return null; }
-
Add the provider to your root layout (
app/layout.tsx):import { ReactSourceLensProvider } from '@/components/ReactSourceLensProvider'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( <html lang="en"> <body> <ReactSourceLensProvider /> {children} </body> </html> ); }
Note: The Babel plugin now automatically detects Next.js App Router directory structures (app/ directory) and provides correct relative paths for source code inspection.
# Run tests in watch mode
npm test
# Run tests once
npm run test:run
# Run tests with UI
npm run test:uiA React hook that enables source code inspection for the current React tree. Call this once at the root of your app in development mode.
projectRoot?: string- Absolute path to your project root directory. Required for VS Code integration to work properly. Example:'/Users/username/projects/my-app'editor?: string- Editor to open files in. Supports:'vscode','webstorm','intellij','atom','sublime','cursor','windsurf'. Defaults to auto-detection or VS Code.
React Source Lens automatically detects your editor by checking:
REACT_EDITORenvironment variableEDITORenvironment variable- Falls back to VS Code if no editor is detected
| Editor | Configuration Value | URL Scheme |
|---|---|---|
| VS Code | 'vscode' or 'code' |
vscode://file/path:line |
| WebStorm/IntelliJ | 'webstorm' or 'intellij' |
jetbrains://idea/navigate/... |
| Atom | 'atom' |
atom://core/open/file?... |
| Sublime Text | 'sublime' |
subl://open?url=file://... |
| Cursor | 'cursor' |
cursor://file/path:line |
| Windsurf | 'windsurf' |
windsurf://file/path:line |
// Auto-detect editor (recommended)
useReactSourceLens({
projectRoot: '/Users/username/projects/my-app'
});
// Explicitly specify editor
useReactSourceLens({
projectRoot: '/Users/username/projects/my-app',
editor: 'windsurf' // or 'vscode', 'webstorm', 'atom', 'sublime', 'cursor'
});
// Minimal setup (auto-detects everything)
useReactSourceLens();MIT