Devtools

Inspect live CRDT state, connection status, and pending ops during development.

meridian-devtools adds a floating overlay to your React app that shows the current state of all active CRDTs and the WebSocket connection. It renders nothing in production.

​

Installation

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

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

​

Setup

Drop <MeridianDevtools /> anywhere in your component tree, passing the same client instance used by MeridianProvider:

import { MeridianDevtools } from "meridian-devtools";

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

​

What the panel shows

Connection section

• WebSocket state: CONNECTED, CONNECTING, DISCONNECTED, or CLOSING
• Current namespace and client ID
• Pending ops count — non-zero when disconnected with buffered writes
• Op latency — P50 and P99 round-trip time in ms, updated every second once at least one op has been sent. P99 turns red above 200ms.

CRDTs tab

All active handles are listed with their current value as JSON, color-coded by type:

Color	Type
Blue	gcounter
Teal	pncounter
Amber	orset
Violet	lwwregister
Pink	presence
Green	crdtmap
Orange	rga
Sky	tree

Click a row to select it — the selection carries over to the History tab.

Events tab

The last 20 incoming deltas from the server in reverse-chronological order, with CRDT type, ID, and timestamp.

History tab

Paginated WAL history for any CRDT. Pick a CRDT from the list, browse its ops with sequence numbers and timestamps, and load additional pages with the Load more button.

Refresh button

A ↻ button in the panel header forces a manual snapshot refresh — useful if the panel appears stale between auto-updates.

​

Production

The component and all its code are excluded from production builds. Bundlers (Vite, Next.js, webpack) eliminate the implementation via NODE_ENV dead-code analysis — there is zero runtime overhead in deployed applications.