> ## Documentation Index
> Fetch the complete documentation index at: https://chahine.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

```bash theme={null}
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`:

```tsx theme={null}
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.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.