Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.tsdraw.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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

Snapshots are JSON-serializable objects.

​
Saving

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

​
Loading

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

​
Callbacks

React to changes in real-time: 
<Tsdraw
  onChange={(doc) => {
    console.log('Shapes:', doc.records.length)
  }}
/>

​
Record Types

Snapshots use flat arrays of TsdrawPersistedRecord ('page' or 'shape'). Convert them using core utilities: 
import { documentSnapshotToRecords, recordsToDocumentSnapshot } from '@tsdraw/core'