@couch-kit/devtools

Debug overlay component for Couch Kit web controllers. Displays connection status, game state, and action history in a collapsible panel.

Installation

bun add @couch-kit/devtools
Copy

Requires @couch-kit/client as a peer dependency (provides the useDebugPanel hook that feeds data to the overlay).

Usage

Wire useDebugPanel (from @couch-kit/client) to the DebugOverlay component:

import { useGameClient, useDebugPanel } from "@couch-kit/client";
import { DebugOverlay } from "@couch-kit/devtools";
import { gameReducer, initialState } from "./shared/types";

function App() {
  const client = useGameClient({ reducer: gameReducer, initialState });
  const debugData = useDebugPanel(client);

  return (
    <div>
      <Game {...client} />
      {import.meta.env.DEV && <DebugOverlay data={debugData} />}
    </div>
  );
}
Copy

Props

Copy