meridian-devtools

React devtools overlay for Meridian — inspect live CRDT state, connection status, and pending ops during development.

Installation

bun add meridian-devtools
# or
npm install meridian-devtools

Requires react ^19.0.0 and meridian-sdk as peer dependencies.

Usage

Drop <MeridianDevtools /> anywhere in your component tree, passing the same client instance you pass to MeridianProvider:

import { Effect } from "effect";
import { MeridianClient } from "meridian-sdk";
import { MeridianProvider } from "meridian-react";
import { MeridianDevtools } from "meridian-devtools";

const client = await Effect.runPromise(
  MeridianClient.create({
    url: "ws://localhost:3000",
    namespace: "my-app",
    token: process.env.MERIDIAN_TOKEN!,
  })
);

function App() {
  return (
    <MeridianProvider client={client}>
      <YourApp />
      <MeridianDevtools client={client} />
    </MeridianProvider>
  );
}

A floating M button appears in the bottom-right corner. Click it to toggle the panel.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | client | MeridianClient | required | The client instance to inspect | | defaultOpen | boolean | false | Open the panel on first render |

Panel

The devtools panel shows:

• Connection — WebSocket state, namespace, client ID, pending ops count, and live op latency (P50/P99 in ms, updated every second once enough samples are collected)
• CRDTs — live list of all active handles with their current value as JSON, color-coded by type
• Events — last 20 incoming deltas from the server in reverse-chronological order
• History — paginated WAL history for any CRDT; pick a CRDT, browse ops with sequence numbers and timestamps, load more pages

Production

MeridianDevtools renders nothing in production. The component and its dependencies are removed by bundlers (Vite, Next.js, webpack) via NODE_ENV dead-code elimination.

Requirements

• React 19+
• meridian-sdk 0.3+