Persistence

IndexedDB

The easiest way to persist state is the persistenceKey prop. It stores the document in IndexedDB and enables cross-tab sync.

<Tsdraw persistenceKey="my-canvas" />

Snapshots are JSON-serializable objects.

const snapshot = editor.getSnapshot()
localStorage.setItem('canvas', JSON.stringify(snapshot))

<Tsdraw snapshot={JSON.parse(localStorage.getItem('canvas'))} />

React to changes in real-time:

<Tsdraw
  onChange={(doc) => {
    console.log('Shapes:', doc.records.length)
  }}
/>

Snapshots use flat arrays of TsdrawPersistedRecord ('page' or 'shape'). Convert them using core utilities:

import { documentSnapshotToRecords, recordsToDocumentSnapshot } from '@tsdraw/core'