Walkthroughs
Devtools tour
Inspect Plan, SQL, AST, writes, sync, and subscriptions.
Setup
import { createReactiveDevtoolsBridge } from '@melon-db/db-devtools';
import { MelonDevtoolsProvider, MelonDevtoolsPanel } from '@melon-db/db-devtools/react';
const bridge = createReactiveDevtoolsBridge();
const db = createDatabase({ schema, adapter, devtools: bridge });
// Wrap app:
<MelonDbProvider db={db}>
<MelonDevtoolsProvider bridge={bridge}>
<App />
<MelonDevtoolsPanel />
</MelonDevtoolsProvider>
</MelonDbProvider>Use useMelonDevtoolsLog() only inside the panel — not on data screens — to avoid re-renders on every query.
Tabs
| Tab | Shows |
|---|---|
| Queries | Plan (indexHint, postFilter, stableSort), SQL, bind params, AST, duration |
| Writes | Insert/update/delete operations |
| Sync | Pull/apply/push phases and change summaries |
| Subs | Active collection subscriptions |
| Errors | Engine and adapter errors |
| Retention | Placeholder for prd-4 sliding window (Phase 31+) |
SQLite adapters populate SQL via getLastQueryDebug(). In-memory adapters show Plan + AST; SQL appears when using @melon-db/db-sqlite.
Try it
- CRUD playground (web)
playground-rn-devin__DEV__(native modal)bun run dev:web
Verify
- After a query, Plan and AST expand in the Queries tab.
- On rn-dev or Node SQLite, SQL and Params appear.
- A write inside
db.write()shows on the Writes tab.