Offline-first apps are distributed systems. When sync breaks, traditional debuggers are useless. ReplayDB records every IndexedDB operation so you can step backward and forward through your app's exact history.
Every DB write, delete, network state change, and sync event recorded in order. Click any event to inspect it.
Full reconstructed database state at any point in time. Step backward and forward event by event.
Before/after comparison between any two events. See exactly what was added, changed, or removed.
Export your full session as a .json file. Attach it to bug reports so others can reproduce the exact issue.
Patches indexedDB.open transparently. Your existing database code needs no modifications whatsoever.
Annotate the timeline with your own events — mark sync start/end, user actions, or anything you want to correlate with DB changes.
Install the two packages, call initReplayDB() once, and render the panel in dev mode. That's it — the panel appears at the bottom of your app.
$ npm install @replaydb/sdk @replaydb/devtools
$ cat main.tsx
import { initReplayDB } from '@replaydb/sdk';
import { Panel } from '@replaydb/devtools';
await initReplayDB();
{ import.meta.env.DEV && <Panel /> }
Free, open source, and takes 2 minutes to add to any project.