> ## 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.

# Persistence

> Save and restore the canvas state

## IndexedDB

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

```tsx theme={null}
<Tsdraw persistenceKey="my-canvas" />
```

## Snapshots

Snapshots are JSON-serializable objects.

### Saving

```tsx theme={null}
const snapshot = editor.getSnapshot()
localStorage.setItem('canvas', JSON.stringify(snapshot))
```

### Loading

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

## Callbacks

React to changes in real-time:

```tsx theme={null}
<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:

```typescript theme={null}
import { documentSnapshotToRecords, recordsToDocumentSnapshot } from '@tsdraw/core'
```