DevTools panels for React Native and Lynx.Runtime tools for agents.
Rozenite adds debugging panels to React Native DevTools — for React Native, web and Lynx apps. Agents read the same runtime data.
- React Native
- Expo
- Re.Pack
- React Native Web
- Lynx
npx rozenite@latest initOfficial plugins
Panels for common React Native work
Install the plugin you need and follow its setup guide. Each one adds a panel to React Native DevTools.
Network Activity
Requests, headers, payloads and timings, including Expo fetch and nitro-fetch traffic.
@rozenite/network-activity-pluginPerformance Monitor
Live marks, measures and metrics per session, exportable for offline analysis.
@rozenite/performance-monitor-pluginRedux DevTools
Store state, dispatched actions and a diff for each one.
@rozenite/redux-devtools-pluginTanStack Query
Queries, mutations and cache entries, with refetch, invalidate and reset.
@rozenite/tanstack-query-pluginReact Navigation
Action timeline with dispatch origins, time travel and deep link testing.
@rozenite/react-navigation-pluginStorage
MMKV, AsyncStorage and SecureStore in one panel, with per-key blacklists.
@rozenite/storage-pluginRozenite for Agents
Give your agent access to the running app
Rozenite creates a session for the running app. An agent can inspect its runtime domains and call registered app or plugin tools.
npx rozenite agent session create
npx rozenite agent console call \
--tool getMessages \
--args '{"levels":["error"]}' \
--session <session-id>Inspect runtime data
Read console logs, network requests, React profiles, and memory snapshots from the selected app session.
Use plugin tools
Plugins can register agent tools. Storage, React Navigation, Redux, and TanStack Query expose tools when their integration is enabled.
Add app-specific tools
Register tools for product-specific state or actions that do not belong to a library plugin.
Rozenite for LynxExperimental
Same panels, same CLI, now on Lynx
Rozenite discovers Lynx apps over DebugRouter and bridges them to the Chrome DevTools Protocol, so the DevTools frontend React Native uses connects to a Lynx card unmodified.
- 01
Turn on Lynx DevTool
Lynx ships its DevTool component switched off. Flip it on in the app, then relaunch — nothing is discoverable until you do.
- 02
Add the plugin
One entry in lynx.config.ts. The plugin injects the device runtime for you, in development only, so there is nothing to import in your app.
- 03
Open the printed URL
The dev server prints a DevTools URL per card. Plugins resolve from your package.json, exactly as they do on Metro.
npm install -D @rozenite/lynxPlugins that move state work today — controls, feature flags, React Hook Form and TanStack Query. Ones built on React Native APIs do not yet.
Rozenite for Web
Debug React Native web in DevTools
Use supported Rozenite panels with browser targets from your React Native web app.
- Select a browser targetOpen your web app in a supported browser, then select that target in React Native DevTools.
- Use Metro or WebpackUse the matching withRozeniteWeb wrapper: Metro can bundle native and web, while Webpack Dev Server can serve the web app.
- Install the extension and packageInstall the Rozenite browser extension and load @rozenite/web from the web entry point. It runs only in development.
npm install -D @rozenite/web
Rozenite / React Native DevToolsBuild the panel your app needs
Use a plugin for app-specific state, controls, or diagnostics. Rozenite provides the DevTools connection and plugin build setup.
The app side
Runs in your app and can use React Native APIs and your existing dependencies.
The DevTools UI side
A React panel in DevTools, connected to the app through a typed event bridge.
const client = useRozeniteDevToolsClient<EventMap>({
pluginId: 'checkout-inspector',
});
client.onMessage('cart-updated', (cart) => {
setItems(cart.items);
});
client.send('clear-cart', { reason: 'devtools' });Create a plugin in two commands
npx rozenite generate my-plugincd my-plugin && rozenite devRozenite on its own
If Rozenite panels are where you spend your debugging time, run just those. rozenite open connects straight to the device, so your panels stay put across app reloads — and they work the same way whichever target you are debugging.
npx rozenite open
Come see what your app is doing
Set up Rozenite, then add the plugins your app needs. Browse the directory, report a missing integration, or publish your own plugin.