A Vite plugin for developing React Native DevTools plugins with hot reload and development tools.

The Rozenite Vite Plugin builds the DevTools panels of a React Native DevTools plugin. It provides hot reload during development, and generates optimized production bundles with proper manifest files.

Panels are the only part of a plugin that needs bundling, because they ship as a browser bundle rather than as a resolvable package entry point. The React Native, Metro and SDK entry points are compiled with tsc by rozenite build.

Features

• Panel Building: Bundles plugin panels for the DevTools frontend
• Hot Reload Development: Instant updates during plugin development
• React Native Web Support: Seamless React Native component development
• Tailwind CSS Support: Processes Tailwind CSS v4 in client panels without additional Vite or PostCSS configuration
• Automatic Manifest Generation: Creates rozenite.json manifest files
• Panel HTML Generation: Automatically generates HTML for plugin panels
• TypeScript Support: Full TypeScript support
• Development Server: Built-in development server with CORS support
• Production Optimization: Optimized builds for production deployment

Installation

Install the Vite plugin as a development dependency:

npm install --save-dev @rozenite/vite-plugin

Quick Start

Basic Configuration

Add the Rozenite plugin to your Vite configuration:

// vite.config.ts
import { defineConfig } from 'vite';
import { rozenitePlugin } from '@rozenite/vite-plugin';

export default defineConfig({
  plugins: rozenitePlugin(),
});

Tailwind CSS v4 is configured automatically for client panels. Import your Tailwind entry stylesheet from the panel source; no Tailwind-specific Vite or PostCSS setup is required. Projects that do not want Tailwind processing can disable it explicitly:

export default defineConfig({
  plugins: rozenitePlugin({ tailwind: false }),
});

Build Targets

This plugin builds the panels only. Run it through the Rozenite CLI, which also compiles the react-native.ts, metro.ts and sdk.ts entry points with tsc:

npx rozenite build

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! 🔥