Name: TypeWire
Author: Taha Nabavi

Setup

Wire your clients into a bridge, then render the panel:

tsx

import {
  InspectorBridge,
  connectTypeFetch,
  connectTypeSocket,
  connectQueryClient,
  TypeDevtools,
} from "@tahanabavi/type-devtools";

const bridge = new InspectorBridge();
connectTypeFetch(apiClient, bridge);   // HTTP
connectTypeSocket(socketClient, bridge); // WebSocket

// Optional: attach a query client to unlock the Cache tab.
const queries = connectQueryClient(queryClient);

function Root() {
  return (
    <>
      <App />
      <TypeDevtools bridge={bridge} queries={queries} />
    </>
  );
}

queries is optional — omit it and the Cache tab simply doesn't appear.

Props

Prop	Type	Default
`bridge`	`InspectorBridge`	—	The transport timeline (required).
`queries`	`QueryInspector`	—	Attach a query cache to show the Cache tab.
`defaultOpen`	`boolean`	`false`	Render expanded on first mount.
`title`	`string`	`"TypeWire devtools"`	Header label.