Runtime Inspector

Alpha · developer preview

Runtime Inspector helps you inspect and fine-tune a running React Native app that uses Reanimated, without repeatedly editing code and comparing motion from memory. Expose runtime values and actions, explore supported animations, and adjust behavior live through a web panel, a Rozenite panel in React Native DevTools, or an MCP client. Supported source-anchored changes can be applied back to code. An experimental macOS Workbench runs from this repository.

Demo

The npm alpha in a fresh Expo app on the iOS Simulator. Flicked open, the mini player's sheet overshoots with the spring it starts with (damping: 14). Damping is raised in the web panel while the app runs, and the spring curve updates with it. The same flick then settles without a bounce, and Apply to code writes the new spring into App.tsx. Watch the video.

What works today

• Runtime controls through the SDK, including sliders, toggles, colors, springs, Bézier curves, and actions.
• Development-time discovery of supported Reanimated motion and scenes.
• Tuning through the web panel, React Native DevTools, MCP, and the experimental Workbench.
• Explicit Apply to code for supported source-anchored values.

These paths share the Runtime Inspector Protocol (RIP) and panel-core session behavior.

Install in your app (npm alpha)

The npm alpha ships the SDK, the Babel plugin, the CLI (broker, web panel, Apply to code), the MCP client and the React Native DevTools panel. The desktop Workbench runs from this repository only.

From your Expo / React Native app root (Reanimated 3 or 4):

npm install @runtime-inspector/react-native@alpha
npm install --save-dev @runtime-inspector/babel-plugin@alpha @runtime-inspector/cli@alpha
npx runtime-inspector init     # Babel plugin + Metro wrapper; --dry-run to preview
npx runtime-inspector dev      # broker + web panel + Apply to code

Then start the app (npx expo start) and open the panel URL printed by runtime-inspector dev. If init created babel.config.js in an Expo app, it also asks for npx expo install babel-preset-expo. Run runtime-inspector through the locally installed CLI as above: an unrelated package named runtime-inspector exists on npm. Details in Getting started.

To tune from React Native DevTools instead of the web panel, add @runtime-inspector/panel-rozenite@alpha and @rozenite/metro (dev), start Metro with WITH_ROZENITE=true npx expo start and open Rozenite → Runtime Inspector in DevTools; no CLI or broker is needed. Apply to code stays in the web panel, which can run at the same time. Validated on the iOS Simulator with Expo SDK 58; setup notes and limits in React Native DevTools.

Try the example

Requirements: Node.js (tested with 22), pnpm 9, Xcode, and an iOS Simulator with Expo Go for the example. The desktop Workbench currently runs on macOS.

pnpm install
pnpm build
pnpm dev

Open the web panel URL printed by pnpm dev. In another terminal, start the example:

pnpm --filter @runtime-inspector/example-react-native-reanimated ios

To start the desktop Workbench, keep the broker running and use another terminal:

pnpm workbench:desktop

The example and Workbench commands are for this repository; they are not a promise of a packaged desktop app or a zero-configuration install for arbitrary projects.

Help test the alpha

I'm looking for feedback from React Native developers trying Runtime Inspector on real interactions, beyond the included example. In particular:

• Does installation and connecting the panel work in your Expo project?
• Which Reanimated animations aren't discovered, or which values can't be adjusted as expected?
• Does live tuning help your normal workflow? Where does the panel get in the way?
• Does anything break on Android, physical devices, bare React Native, or other supported Reanimated versions? These paths aren't all validated yet.

If something doesn't work, open an issue with your Expo / React Native / Reanimated versions, platform, and reproduction steps. Please don't include session tokens, private source code, or other secrets.

Alpha limits

• Interfaces and APIs may change. This is a development tool, not a production monitoring or remote-access service.
• Use the broker only on a trusted development network; this alpha does not provide a production security model. The session token in the panel URL is the only access control: whoever has it can change live values and, through Apply to code, edit source files in the app folder.
• Motion discovery supports a subset of Reanimated patterns (assignments in component code, not inside worklets or gesture callbacks). Unsupported compositions may not appear.
• On Reanimated 4, declare mass in springs you tune: the panel draws an omitted mass as 1, Reanimated 4's withSpring uses 4. // @inspect and useRuntimeValue also trigger Reanimated 4's "Reading from value during component render" development warning.
• The desktop Simulator viewport and input path use private Xcode/Simulator APIs and may break across Xcode versions.
• The desktop client is an unpackaged development build. Production signing, distribution, and first-run macOS Screen Recording permission UX are not implemented.

Checks

pnpm build
CI=true pnpm verify

See implementation status for validation details and known gaps, getting started for SDK setup, and protocol stability for RIP change requirements.

License

MIT