DevTools panels for React Native.Runtime tools for agents.
Rozenite adds debugging panels to React Native DevTools. Agents can read the same runtime data.
npx rozenite@latest init
Official 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 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 devCome 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.