Skip to main content
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

PropTypeDefaultDescription
clientMeridianClientrequiredThe client instance to inspect
defaultOpenbooleanfalseOpen 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:
ColorType
Bluegcounter
Tealpncounter
Amberorset
Violetlwwregister
Pinkpresence
Greencrdtmap
Orangerga
Skytree
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.