# Rozenite

> Build powerful debugging tools and custom panels for React Native DevTools with type-safe, isomorphic communication

## Docs

- [Adding tools to your application](/docs/agent/adding-tools-to-your-application.md): You can expose custom agent tools directly from your React Native app. These tools appear under the app domain so coding agents (e.g. CLI, Cursor, Codex) can discover and call them via Rozenite for Agents. Use this when you want agents to perform app-specific actions—for example, triggering a debug flow, returning build metadata, or driving in-app behavior during automated testing.
- [Making your plugin agent-enabled](/docs/agent/making-your-plugin-agent-enabled.md): Rozenite plugins can expose agent tools so coding agents (CLI, Cursor, Codex) can inspect and control your plugin’s domain via Rozenite for Agents. Tools are grouped under a domain that matches your plugin’s ID, and agents discover them the same way they use built-in domains like console or network. This page describes what you need to expose tools from your plugin package.
- [Rozenite for Agents](/docs/agent/overview.md): Rozenite for Agents is the agent-facing way to interact with React Native DevTools and Rozenite plugins. It gives coding agents a reliable interface for inspecting a running React Native app through Rozenite, including logs, network activity, React profiling data, and plugin-specific tooling. You can access this workflow through the rozenite agent CLI or, if you need direct programmatic access, through @rozenite/agent-sdk. For most users, the CLI is still the recommended starting point. :::warning Experimental
This functionality is experimental and may not work in all cases. If you run into a bug, please open an issue.
:::
- [Agent SDK](/docs/agent/sdk.md): @rozenite/agent-sdk is the programmatic version of rozenite agent for Node.js and TypeScript scripts. Use it when you want to write a script, automation, or agent runtime that talks to a running app through Rozenite directly from code. :::tip
For most debugging workflows, start with the rozenite agent CLI and the rozenite-agent skill. Reach for the SDK when you want code instead of shell commands, and install rozenite-agent-sdk if you want your coding agent to follow that SDK-first workflow directly.
::: :::warning Experimental
Rozenite for Agents is experimental and may change. If you run into a bug, please open an issue.
:::
- [Agent Skills](/docs/agent/skills.md): If you use Codex or another coding agent that supports the Vercel skills CLI, you can install a Rozenite skill so the agent can use Rozenite for Agents efficiently. Rozenite currently ships two complementary skills: rozenite-agent for CLI-driven rozenite agent ... workflows and live shell-based debuggingrozenite-agent-sdk for Node.js and TypeScript scripts that use @rozenite/agent-sdk These skills are the easiest way to make a coding agent effective with Rozenite. They give the agent the expected workflow so it can interact with React Native DevTools and Rozenite plugins without fumbling CLI usage, SDK lifecycle, or plugin domain resolution. Both skills complement Rozenite; they do not replace it. Your app still needs Rozenite installed and configured because the agent ultimately talks to the running app through the Rozenite agent runtime.
- [Quick start](/docs/getting-started.md)
- [Introduction](/docs/introduction.md): Rozenite adds plug-and-play debugging panels to React Native DevTools. Install official plugins, open DevTools, and start debugging in minutes — no extra windows or servers. It also gives teams a safe, scalable way to standardize debugging across projects. Plugins auto‑discover and load during development, are easy to configure, and are automatically disabled in production builds so no plugin code ships to your users. :::info Try it now
Skip ahead to the Getting Started guide or browse the Plugin Directory.
:::
- [Controls Plugin](/docs/official-plugins/controls.md): The Controls plugin lets you expose app-defined runtime controls inside React Native DevTools. Instead of adding temporary debug screens or hidden menus, you can give your team a dedicated panel for toggles, pickers, inputs, actions, and read-only status values.
- [Expo Atlas Plugin](/docs/official-plugins/expo-atlas.md): The Expo Atlas plugin integrates Expo Atlas directly into your React Native DevTools, providing powerful bundle analysis and optimization capabilities for your React Native applications.
- [File System Plugin](/docs/official-plugins/file-system.md): The File System plugin provides an in-app file explorer for React Native DevTools, so you can inspect app directories and preview text or image files directly from the DevTools UI.
- [MMKV Plugin](/docs/official-plugins/mmkv.md): The MMKV plugin provides comprehensive storage inspection and management for React Native applications using MMKV, offering real-time data visualization and editing capabilities directly within your DevTools environment. :::warning Deprecation Notice
The MMKV plugin is planned to be deprecated in favor of the generic Storage plugin, which supports MMKV and additional storage backends through adapters.
:::
- [Network Activity Plugin](/docs/official-plugins/network-activity.md): The Network Activity plugin provides comprehensive network request monitoring for React Native applications, offering real-time network debugging capabilities similar to Chrome DevTools Network panel.
- [Overlay Plugin](/docs/official-plugins/overlay.md): The Overlay plugin provides visual debugging overlays for React Native applications, including customizable grids and image comparison tools to help with UI alignment and visual testing. This plugin was inspired by RocketSim - an enhanced iOS simulator.
- [Official Plugins](/docs/official-plugins/overview.md): As the creators of Rozenite, we maintain several plugins that demonstrate the framework's capabilities and provide essential debugging tools for React Native development. :::info Rozenite is currently in beta.
Our official plugins are also in beta and may not work in all possible use-cases. We're actively working to improve stability and compatibility. If you encounter any issues, please report them or help us make it better by contributing to the repository.
:::
- [Performance Monitor Plugin](/docs/official-plugins/performance-monitor.md): The Performance Monitor plugin provides comprehensive real-time performance monitoring and metrics visualization for React Native applications, helping you identify bottlenecks and optimize your app's performance. It's based on the react-native-performance library, so any marks, measures, or metrics you emit using that library will automatically appear in the DevTools interface.
- [React Hook Form Plugin](/docs/official-plugins/react-hook-form.md): The React Hook Form plugin lets you inspect your forms in real time from React Native DevTools. For every mounted form you can see field values, validation errors, dirty and touched states, native input types, and overall form status — without adding any logging or breakpoints.
- [React Navigation Plugin](/docs/official-plugins/react-navigation.md): The React Navigation plugin provides comprehensive navigation debugging and inspection for React Navigation v7, offering real-time action monitoring, state inspection, and deep linking testing directly within your React Native DevTools environment.
- [Redux DevTools Plugin](/docs/official-plugins/redux-devtools.md): The Redux DevTools plugin integrates Redux DevTools directly into your React Native DevTools, providing powerful state inspection and debugging capabilities for your Redux-powered React Native applications.
- [Require Profiler Plugin](/docs/official-plugins/require-profiler.md): The Require Profiler plugin instruments require() calls during your React Native app's initial loading to track module initialization times, helping you identify which modules impact startup performance and optimize lazy evaluation through inlined require calls.
- [SQLite Plugin](/docs/official-plugins/sqlite.md): The SQLite plugin provides a query-first database inspector for React Native DevTools. It works with registered SQLite adapters, ships with an expo-sqlite adapter out of the box, and derives tables, schema details, and browse views entirely through SQL and PRAGMA queries.
- [Storage Plugin](/docs/official-plugins/storage.md): The Storage plugin provides a generic storage inspector for React Native DevTools. It supports multiple adapters and multiple storages per adapter, so you can inspect MMKV, AsyncStorage, and SecureStore in one panel.
- [TanStack Query Plugin](/docs/official-plugins/tanstack-query.md): The TanStack Query plugin integrates TanStack Query DevTools directly into your React Native DevTools, providing powerful query monitoring, cache management, and debugging capabilities for your React Native applications. This plugin was inspired by the excellent work of Austin Johnson and his react-query-external-sync library, which provided crucial insights into making TanStack Query work effectively in React Native environments.
- [Plugin Development Overview](/docs/plugin-development/overview.md): Plugins are the way to add new panels and functionalities to React Native DevTools through Rozenite. They allow you to extend the DevTools with custom debugging tools, performance monitors, and development utilities.
- [Plugin Development](/docs/plugin-development/plugin-development.md): This guide will walk you through the complete process of creating a React Native DevTools plugin, from initial generation to building for production. Tip: Before creating your own plugin, check out the Official Plugins to see if there's already a plugin that meets your needs!
- [RPC](/docs/plugin-development/rpc.md): The RozeniteDevToolsClient you get from getRozeniteDevToolsClient (see the
Plugin Development Guide) is fire-and-forget:
send(type, payload) and onMessage(type, listener). That's the right tool
for events, but it isn't an answer to "call this and give me a result." Every plugin that needs a result back from the other side ends up
reinventing the same thing by hand: a correlation id, a matching response
event type, a Promise stored in a map, and an ad-hoc timeout. And none of
that hand-rolled scaffolding protects you from the case that actually causes
support tickets — the panel isn't mounted yet, or the device peer has died,
and your caller just hangs forever with no Promise ever settling. @rozenite/plugin-bridge ships createRozeniteRpc so you don't have to
build this yourself. It gives you an awaitable call with acknowledgement,
heartbeats, timeouts, and cancellation on top of your existing client. The abstraction is symmetric: both the device and the panel can register
handlers with handle() and call methods on the same rpc instance.
- [Prior Art](/docs/prior-art.md): Rozenite wouldn't exist without the work that came before it. We want to thank the
teams behind the tools that taught us what React Native debugging could be and helped
us understand what developers actually need.
- [Rozenite for Web](/docs/rozenite-for-web.md): :::warning Experimental
Rozenite for Web is an experimental feature. The API and behavior may change in future releases.
::: Rozenite for Web lets you debug your React Native web app from React Native DevTools. To use it, you need: the Rozenite browser extensionthe @rozenite/web package in your app Browser support: Chromium-based browsers only.

## Plugin Directory

- [](/plugin-directory.md)
- [](/plugin-directory/1.md)
- [](/plugin-directory/2.md)

## Others

- [](/404.md)
- [](/welcome.md)