Getting Started

Installation

pnpm

pnpm add convex-inspect

npm

npm install convex-inspect

yarn

yarn add convex-inspect

Add the panel

Render <ConvexPanel /> anywhere in your app — typically near the root so it’s always available:

import { ConvexPanel } from 'convex-inspect/react';

export default function App() {
  return (
    <>
      {/* your app */}
      <ConvexPanel />
    </>
  );
}

The panel appears as a floating button in the bottom-right corner of the page. Click it to open the event log.

Tip

ConvexPanel renders nothing in production. You can leave it in your app permanently and it will be stripped at build time.

Track events

There are two ways to feed events into the panel: drop-in hooks or the event bus.

Option 1 — Drop-in hooks (recommended)

Replace your existing convex/react imports with the wrapped versions from convex-inspect/react. They’re identical in usage and automatically instrument every call:

import { useQuery, useMutation, useAction } from 'convex-inspect/react';

// useQuery, useMutation, and useAction work exactly like the originals
const tasks = useQuery(api.tasks.list);
const addTask = useMutation(api.tasks.add);
const sendEmail = useAction(api.email.send);

Option 2 — Manual bus

If you use ConvexHttpClient, a custom provider, or want fine-grained control, emit events directly via convexPanelBus:

import { convexPanelBus } from 'convex-inspect/react';

const id = crypto.randomUUID();
const startedAt = Date.now();

// Emit the loading state
convexPanelBus.emit({ id, type: 'mutation', name: 'tasks:add', args: { text: 'Buy milk' }, status: 'loading', startedAt });

// Emit the result
convexPanelBus.emit({ id, type: 'mutation', name: 'tasks:add', args: { text: 'Buy milk' }, status: 'success', result: { ok: true }, startedAt, completedAt: Date.now() });