# @rozenite/plugin-bridge

> Communication layer for React Native DevTools plugins across React Native and web environments

Latest version **2.4.0** (published 2026-09-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rozenite/plugin-bridge
pnpm add @rozenite/plugin-bridge
yarn add @rozenite/plugin-bridge
bun add @rozenite/plugin-bridge
```

## Health

**Score 75/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 2.4.0 |
| Published | 2026-09-03 |
| First published | 2025-07-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=20 |
| Dependencies | 1 |
| Unpacked size | 105.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 660 |
| Author | Szymon Chmal <szymon.chmal@callstack.com> |
| Maintainers | aitwar |
| Keywords | bridge, devtools, isomorphic, plugin, react-native |

## Links

- npm: https://www.npmjs.com/package/@rozenite/plugin-bridge
- Repository: https://github.com/callstackincubator/rozenite
- Homepage: https://github.com/callstackincubator/rozenite#readme
- Issues: https://github.com/callstackincubator/rozenite/issues
- npm.io page: https://npm.io/package/@rozenite/plugin-bridge

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^2.3.0

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 2.4.0 (latest) — 2026-09-03
- 1.7.0-rc.2 (rc) — 2026-04-09
- 1.0.0-alpha.17-canary.1762179186380 (canary) — 2025-11-03
- 2.3.0 — 2026-09-01
- 2.2.0 — 2026-08-19
- 2.1.0 — 2026-08-13
- 2.0.0 — 2026-08-06
- 1.13.0 — 2026-06-24
- 1.12.0 — 2026-06-08
- 1.11.0 — 2026-05-27
- 1.10.0 — 2026-05-20
- 1.9.0 — 2026-05-11
- 1.8.1 — 2026-05-05
- 1.8.0 — 2026-05-04
- 1.7.0 — 2026-04-09
- … 33 more at https://npm.io/package/@rozenite/plugin-bridge/versions

## README

![rozenite-banner](https://www.rozenite.dev/rozenite-banner.jpg)

### A communication layer for React Native DevTools plugins across React Native and web environments.

[![mit licence][license-badge]][license] [![npm downloads][npm-downloads-badge]][npm-downloads] [![Chat][chat-badge]][chat] [![PRs Welcome][prs-welcome-badge]][prs-welcome]

The Rozenite Plugin Bridge provides an isomorphic communication layer that enables seamless message passing between React Native DevTools plugins running in different environments. It abstracts the complexity of Chrome DevTools Protocol (CDP) and browser messaging, providing a unified API for plugin communication.

## Features

- **Isomorphic Communication**: Works seamlessly across React Native and web environments
- **Type-Safe Messaging**: Full TypeScript support with generic event maps
- **React Integration**: React hooks for easy integration with React components
- **Message Routing**: Plugin-specific message routing and filtering
- **Connection Management**: Automatic connection handling and cleanup

## Installation

Install the plugin bridge as a dependency:

```bash
npm install @rozenite/plugin-bridge
```

## Quick Start

### Using the React Hook

```typescript
import { useRozeniteDevToolsClient } from '@rozenite/plugin-bridge';

// Define your event types
type MyEventMap = {
  'data-updated': { value: number };
  'status-changed': { status: 'connected' | 'disconnected' };
};

function MyPlugin() {
  const client = useRozeniteDevToolsClient<MyEventMap>({
    pluginId: 'my-plugin',
  });

  useEffect(() => {
    if (!client) return;

    // Listen for messages
    const subscription = client.onMessage('data-updated', (payload) => {
      console.log('Data updated:', payload.value);
    });

    // Send messages
    client.send('status-changed', { status: 'connected' });

    return () => subscription.remove();
  }, [client]);

  return <div>My Plugin</div>;
}
```

### Using the Client Directly

```typescript
import { getRozeniteDevToolsClient } from '@rozenite/plugin-bridge';

type MyEventMap = {
  'custom-event': { message: string };
};

async function setupClient() {
  const client = await getRozeniteDevToolsClient<MyEventMap>('my-plugin');

  // Send a message
  client.send('custom-event', { message: 'Hello from plugin!' });

  // Listen for messages
  const subscription = client.onMessage('custom-event', (payload) => {
    console.log('Received:', payload.message);
  });

  // Clean up when done
  subscription.remove();
  client.close();
}
```

### Testing

Both `getRozeniteDevToolsClient` and `useRozeniteDevToolsClient` accept an optional `channel`, letting a test supply its own `Channel` instead of resolving one from the environment. This is the seam [`@rozenite/testing`](https://www.npmjs.com/package/@rozenite/testing) builds on to run a plugin's panel and device code against each other in Node, without Metro or a simulator:

```typescript
const client = await getRozeniteDevToolsClient('my-plugin', { channel: fakeChannel });
```

Production callers should never need this — leave it unset and a real channel is resolved and cached as before.

## 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][callstack-readme-with-love] is a group of React and React Native geeks, contact us at [hello@callstack.com](mailto:hello@callstack.com) if you need any help with these or just want to say hi!

Like the project? ⚛️ [Join the team](https://callstack.com/careers/?utm_campaign=Senior_RN&utm_source=github&utm_medium=readme) who does amazing stuff for clients and drives React Native Open Source! 🔥

[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=rozenite&utm_term=readme-with-love
[license-badge]: https://img.shields.io/npm/l/rozenite?style=for-the-badge
[license]: https://github.com/callstackincubator/rozenite/blob/main/LICENSE
[npm-downloads-badge]: https://img.shields.io/npm/dm/rozenite?style=for-the-badge
[npm-downloads]: https://www.npmjs.com/package/@rozenite/plugin-bridge
[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=for-the-badge
[prs-welcome]: https://github.com/callstackincubator/rozenite/blob/main/CONTRIBUTING.md
[chat-badge]: https://img.shields.io/discord/426714625279524876.svg?style=for-the-badge
[chat]: https://discord.gg/xgGt7KAjxv

---
_Source: https://npm.io/package/@rozenite/plugin-bridge · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._