#Plugin Development Overview

Plugins add new panels to React Native DevTools through Rozenite — custom debugging tools, performance monitors, and development utilities tailored to your app.

#How plugins work

A plugin has two parts that talk to each other over a type-safe, event-based bridge:

1. App side — code that runs in your app. Its entry point is react-native.ts, on every target Rozenite supports.
2. DevTools side — the panel UI shown in DevTools.

Changes on either side are reflected on the other in real time, and both sides can send data or commands.

#Plugin structure

my-plugin/
├── src/
│   └── hello-world.tsx      # Your DevTools panels
├── react-native.ts          # App-side entry point
├── rozenite.config.ts       # Plugin configuration
├── vite.config.ts          # Build configuration
├── package.json            # Dependencies and scripts
└── tsconfig.json          # TypeScript configuration

#What you can build

Anything that benefits from a live view into your running app: custom debugging tools, performance monitors, state inspectors, network tools, storage inspectors, or development-time analytics.

To develop without wiring up a playground app first, rozenite dev opens an in-browser dev host where you can preview panels, read the message log, and dispatch commands — see the Plugin Development guide. You can also define reusable presets and scripted dev flows in rozenite.config.ts to speed up local iteration.

#Getting started

Ready to build one? Follow the Plugin Development Guide for a full walkthrough, or browse the Official Plugins for examples of what's possible.

#Contributing

We welcome contributions to both our maintained plugins and the community ecosystem. See the Plugin Development Guide to get started, or reach out to the community to discuss an idea.