Does any of this ship to my users?

No. Rozenite is off until you enable it in your bundler config, and plugins are disabled in production builds, so no plugin code ships.

Which versions does it support?

Expo SDK 52+, React Native 0.76+ and Re.Pack 5.2+. Bare React Native works when it matches the React Native of the minimum Expo SDK.

Does it work with Expo?

Yes, with Expo and bare React Native, on Metro or Re.Pack. rozenite init detects the bundler and updates the config.

Can an agent and React Native DevTools connect at once?

Yes. Your agent can hold a session on the app while React Native DevTools stays open, so you can watch the panels while it works.

What about Lynx and the web?

Both are experimental. Lynx works through rspeedy, React Native Web through the browser extension. Plugins declare which targets they support.

Can I list my own plugin?

Yes. The plugin directory is a list in the repo: add your package with a pull request.

See inside your running app. So can your agent.

Rozenite puts plugin panels in React Native DevTools for you, and gives your coding agent the same data as tools it calls from the terminal: logs, network requests, React profiles and plugin state.

Get started

$npx rozenite@latest init

Rozenitezsh

$ npx rozenite@latest init

$ npm install -D @rozenite/network-activity-plugin

# for you: press j to open React Native DevTools

$ npx skills add callstackincubator/rozenite --skill rozenite

# for your agent: the rozenite skill

RozeniteReact Native DevTools

ConsoleSourcesNetworkMemoryRozenite

RequestStatusTime

GET /api/products200142 ms

GET /api/user20088 ms

GET /api/cart500212 ms

Rozeniteagent

> Why does the cart screen fail?

● session · create

● network · listRequests {"limit":5}

GET /api/cart 500 212 ms

● console · getMessages {"levels":["error"]}

ERR TypeError: Cannot read property 'price' of undefined

✓ /api/cart returns 500, and CartScreen reads items before they load.

[01] How it works

Set it up once. You and your agent both use it.

01
Run init
It detects Metro, Re.Pack or rspeedy, installs the right package and updates your bundler config.
$ npx rozenite@latest init
02
Add plugins
Each plugin adds a panel to React Native DevTools. Most also need a small hook in your app; its page has the line.
$ npm install -D @rozenite/tanstack-query-plugin
03
Give your agent the skill
The rozenite skill teaches a coding agent the rozenite agent CLI, with docs that match your installed version.
$ npx skills add callstackincubator/rozenite --skill rozenite

Rozenitemetro.config.js

const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
const { withRozenite } = require('@rozenite/metro');

const defaultConfig = getDefaultConfig(__dirname);

module.exports = withRozenite(mergeConfig(defaultConfig, {}), {
  enabled: process.env.WITH_ROZENITE === 'true',
});

@rozenite/metroExpo or bare React Native, with the bundler React Native ships.Set up Metro

Rozeniterspack.config.mjs

import { withRozenite } from '@rozenite/repack';

export default withRozenite(
  {
    // Your existing Re.Pack configuration
  },
  {
    enabled: process.env.WITH_ROZENITE === 'true',
  },
);

@rozenite/repackRe.Pack 5.2 and above.Set up Re.Pack

Rozenitemetro.config.js

const { getDefaultConfig } = require('expo/metro-config');
const { withRozeniteWeb } = require('@rozenite/web/metro');

const config = getDefaultConfig(__dirname);

module.exports = withRozeniteWeb(config);

// and in your web entry point:
require('@rozenite/web');

@rozenite/webReact Native Web in a Chromium browser, with the Rozenite extension. Experimental.Set up Web

Rozenitelynx.config.ts

import { defineConfig } from '@lynx-js/rspeedy';
import { pluginReactLynx } from '@lynx-js/react-rsbuild-plugin';
import { rozeniteLynxPlugin } from '@rozenite/lynx/rspeedy';

export default defineConfig({
  plugins: [pluginReactLynx(), rozeniteLynxPlugin()],
});

@rozenite/lynxLynx apps through rspeedy, with Lynx DevTool turned on in the app. Experimental.Set up Lynx

[02] Agents

The same runtime, as tools your agent calls.

Rozenite for Agents opens a session on the running app. Your agent reads logs, network requests, React profiles, performance traces and heap snapshots, and calls the tools your app and your plugins register.

Rozenite for Agents

Rozenitezsh

npx rozenite agent session create

npx rozenite agent console call \
  --tool getMessages \
  --args '{"levels":["error"]}' \
  --session <session-id>

consoleBuilt-in

Logs from the app, filtered by level or text.

getMessages · clearMessages

networkBuilt-in

Requests during a flow, with headers and bodies.

startRecording · listRequests · getResponseBody

reactBuilt-in

The component tree, props, state and hooks, and render profiles.

searchNodes · startProfiling · getRenderData

performanceBuilt-in

A performance trace over a reproduction.

startTrace · stopTrace

memoryBuilt-in

Heap snapshots and allocation sampling.

takeHeapSnapshot · startSampling

app · pluginsYours

Your app and your plugins register their own tools with one hook, for the state and actions only they know about.

Add a tool

[03] Official plugins

Panels for the libraries you already use.

Each official plugin is a thin bridge between a library and a DevTools panel, in the Rozenite tab.

[04] Build your own

And the one you write, for you and your agent.

Write a plugin when you need to see your own app's state, or a library no plugin covers yet. You get a panel in the Rozenite tab, and your agent gets tools to read the same data.

Rozeniteuser-panel/react-native.ts

import { DevToolsPluginClient } from '@rozenite/plugin-bridge';

export default function setupPlugin(
  client: DevToolsPluginClient<PluginEvents>
) {
  client.onMessage('request-user-data', () => {
    client.send('user-data', getUser());
  });
}

import { useRozenitePluginAgentTool } from '@rozenite/agent-bridge';

export function UserPanelAgentTools() {
  useRozenitePluginAgentTool({
    pluginId: '@my-org/user-panel',
    tool: getUserTool,
    handler: () => getUser(),
  });
  return null;
}

RozeniteReact Native DevTools

ConsoleSourcesNetworkMemoryRozenite

FieldValue

iduser-123

nameJohn Doe

email[email protected]

Rozeniteagent

> Who is signed in on the simulator?

● session · create

● @my-org/user-panel · get-user

John Doe · user-123 · [email protected]

✓ John Doe is signed in.

$npx rozenite generate

Plugin development Agent-enabled plugins

[05] Safe by default

Development only. Nothing in production.

Off until you turn it on

Rozenite only runs when enabled is true in your bundler config, usually behind WITH_ROZENITE=true.

Nothing ships to users

Plugins are disabled in production builds, so no plugin code reaches your release bundle.

Choose what loads

Every installed plugin loads by default. Narrow it with include or exclude in withRozenite.

Panels keep their state

Switch away and back without losing data. Opt out per plugin with destroyOnDetachPlugins.

[06] Beyond React Native

Same panels, more places.

@rozenite/lynxExperimental

[07] FAQ

Does any of this ship to my users?: No. Rozenite is off until you enable it in your bundler config, and plugins are disabled in production builds, so no plugin code ships.
Which versions does it support?: Expo SDK 52+, React Native 0.76+ and Re.Pack 5.2+. Bare React Native works when it matches the React Native of the minimum Expo SDK.
Does it work with Expo?: Yes, with Expo and bare React Native, on Metro or Re.Pack. rozenite init detects the bundler and updates the config.
Can an agent and React Native DevTools connect at once?: Yes. Your agent can hold a session on the app while React Native DevTools stays open, so you can watch the panels while it works.
What about Lynx and the web?: Both are experimental. Lynx works through rspeedy, React Native Web through the browser extension. Plugins declare which targets they support.
Can I list my own plugin?: Yes. The plugin directory is a list in the repo: add your package with a pull request.

Get started

See inside your running app. So can your agent.

Set it up once. You and your agent both use it.

Run init

Add plugins

Give your agent the skill

The same runtime, as tools your agent calls.

Panels for the libraries you already use.

Network Activity

TanStack Query

Redux DevTools

React Navigation

Storage

Performance Monitor

Controls

File System

Feature Flags

SQLite

Expo Atlas

Require Profiler

React Hook Form

Overlay

Community plugins

Your own

And the one you write, for you and your agent.

Development only. Nothing in production.

Off until you turn it on

Nothing ships to users

Choose what loads

Panels keep their state

Same panels, more places.

Rozenite for Lynx

Rozenite for Web

Standalone app

See inside your running app. So can your agent.

Set it up once. You and your agent both use it.

Run init

Add plugins

Give your agent the skill

The same runtime, as tools your agent calls.

Panels for the libraries you already use.

Network Activity

TanStack Query

Redux DevTools

React Navigation

Storage

Performance Monitor

Controls

File System

Feature Flags

SQLite

Expo Atlas

Require Profiler

React Hook Form

Overlay

Community plugins

Your own

And the one you write, for you and your agent.

Development only. Nothing in production.

Off until you turn it on

Nothing ships to users

Choose what loads

Panels keep their state

Same panels, more places.

Rozenite for Lynx

Rozenite for Web

Standalone app

Frequently asked questions