Skip to main content

Click-to-Source for React Native

Tap any component in your app to instantly jump to its source code in your favorite editor

See It In Action

Watch how easy it is to inspect and navigate to source code

Developer Experience First

Speed up your development workflow with powerful inspection tools

🎯

Click to Inspect

Tap any component to see its source location, styles, and component hierarchy.

🚀

Instant Navigation

Jump directly to the exact line of code in your IDE with one click.

📦

Zero Config

No babel plugin required. Just one package, two config steps.

🔧

Auto Editor Detection

Automatically detects VS Code, Cursor, WebStorm, and other running editors.

Works With Your Stack

Seamless integration with Expo and bare React Native projects

Expo
React Native

Supported Editors

Open source files in your favorite code editor

VS Code
CursorCursor
WebStorm
Sublime
Neovim iconNeovim
Zed
file_type_xcodeXcode

How It Works

Two-step process from tap to editor

1

Runtime

Inspector component captures taps and extracts source info from React's debug metadata

<Inspector>
2

Dev Server

Metro middleware receives the request and launches your editor at the correct file:line

react-native-dev-inspector/metro

Quick Start

Get up and running in minutes - just one package!

Install

npm install react-native-dev-inspector

Configure Metro

const { withInspector } = require('react-native-dev-inspector/metro');
module.exports = withInspector(config);

Ready to speed up your workflow?

Start inspecting your React Native components today

Get Started Now