@live-canvas/persistence-indexeddb

IndexedDB persistence adapter for @live-canvas/core.

Automatically saves the whiteboard state to the browser's IndexedDB on every local change and restores it on the next load — giving users offline-resilient, room-scoped persistence with no server required.

Installation

npm install @live-canvas/persistence-indexeddb @live-canvas/core

Usage

import { createWhiteboard } from '@live-canvas/core';
import { createIndexedDbPersistence } from '@live-canvas/persistence-indexeddb';

const whiteboard = createWhiteboard();

const persistence = createIndexedDbPersistence(whiteboard.editor, {
  roomId: 'my-room',   // each room gets its own saved snapshot
  dbName: 'my-app',   // optional, defaults to 'live-canvas'
  throttleMs: 500,     // optional coalescing window, defaults to 500 ms
});

// Wait for the initial load before wiring sync or seeding content
await persistence.ready;

if (!persistence.restored) {
  // No prior save found — seed default content here
}

// Force an immediate save (e.g. before page unload)
window.addEventListener('beforeunload', () => persistence.flush());

// Dispose when done
persistence.destroy();

API

createIndexedDbPersistence(editor, options)

| Option | Type | Default | Description | |---|---|---|---| | roomId | string | — | Per-room key in the object store. Required. | | dbName | string | 'live-canvas' | IndexedDB database name. | | throttleMs | number | 500 | Coalescing window (ms) for auto-saves. | | onError | (error: unknown) => void | console.error | Called on any unexpected IDB or JSON error. |

Returns an IndexedDbPersistence object:

| Member | Description | |---|---| | ready | Promise<void> — resolves after the initial load attempt completes. | | restored | boolean — true if a prior snapshot was loaded successfully. | | flush() | Force an immediate save, bypassing the throttle. | | clear() | Delete the persisted snapshot for this room. | | destroy() | Stop auto-saving and close the database handle. |

License

MIT