Persistence key

Save the document in the browser and sync it between tabs with persistenceKey.

import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'

export default function PersistenceKeyExample() {
	return (
		<div className="tldraw__editor">
			<Tldraw persistenceKey="persistence-key-example" />
		</div>
	)
}

Pass a persistenceKey to the Tldraw component and it stores the document in IndexedDB under that key, restores it on the next load, and keeps other tabs with the same key in sync via a broadcast channel.

Draw something, refresh the page, and it's still there. Open this page in a second tab and changes appear in both. Different keys are independent documents, so use a key per document (for example a document id) rather than one per app.

If you need to persist somewhere other than the browser, see the sync and snapshot examples instead.

Is this page helpful?
Prev
Edge scrolling
Next
Read-only