A command-line interface for creating and managing React Native DevTools plugins.

The Rozenite CLI is the primary tool for scaffolding, building, and developing React Native DevTools plugins. It provides an intuitive command-line experience with interactive prompts, automated project setup, and development workflows.

Features

• Plugin Generation: Create new React Native DevTools plugins with a complete project structure
• Interactive Setup: Guided prompts for plugin configuration and metadata
• Build System: Compile plugins for different targets
• Development Server: Hot-reload development environment with file watchers
• Template System: Pre-configured templates with TypeScript, Vite, and Rozenite integration

Installation

The CLI is included with the main Rozenite package:

npm install rozenite

Quick Start

Generate a New Plugin

Create a new React Native DevTools plugin:

npx rozenite generate

This will:

• Create a new directory with the plugin name
• Set up TypeScript configuration
• Configure Vite build system
• Install necessary dependencies
• Initialize a Git repository
• Create a basic plugin structure

Build a Plugin

Compile your plugin for production:

npx rozenite build

This builds the plugin for all configured targets.

Development Mode

Start the development server with hot reload:

npx rozenite dev

This starts:

• Vite dev server for client panels
• File watchers for React Native entry points
• Hot reload for development

Commands

rozenite generate [path]

Generate a new React Native DevTools plugin.

Options:

• [path] - Target directory (defaults to current directory)

Examples:

# Generate in current directory
rozenite generate

# Generate in specific directory
rozenite generate ./my-plugins/awesome-plugin

rozenite build [path]

Build a React Native DevTools plugin for production.

Options:

• [path] - Plugin directory (defaults to current directory)

Examples:

# Build current plugin
rozenite build

# Build specific plugin
rozenite build ./my-plugin

rozenite dev [path]

Start development server with file watchers.

Options:

• [path] - Plugin directory (defaults to current directory)

Examples:

# Start dev server for current plugin
rozenite dev

# Start dev server for specific plugin
rozenite dev ./my-plugin

Plugin Structure

When you generate a new plugin, the CLI creates the following structure:

my-plugin/
├── src/
│   └── hello-world.tsx          # Example plugin component
├── package.json                 # Plugin dependencies and metadata
├── tsconfig.json               # TypeScript configuration
├── vite.config.ts              # Vite build configuration
├── rozenite.config.ts          # Rozenite plugin configuration
└── react-native.ts             # React Native entry point

Configuration

rozenite.config.ts

The main configuration file for your plugin:

export default {
  panels: [
    {
      name: 'Hello World!',
      source: './src/hello-world.tsx',
    },
  ],
};

Development Workflow

1. Generate a new plugin using rozenite generate
2. Develop your plugin using rozenite dev
3. Build for production using rozenite build
4. Test your plugin in React Native DevTools
5. Publish your plugin to npm

Requirements

• Node.js >= 22
• pnpm, npm, or yarn package manager

Made with ❤️ at Callstack

rozenite is an open source project and will always remain free to use. If you think it's cool, please star it 🌟.

Callstack is a group of React and React Native geeks, contact us at [email protected] if you need any help with these or just want to say hi!

Like the project? ⚛️ Join the team who does amazing stuff for clients and drives React Native Open Source! 🔥