import { useCallback, useEffect, useState } from 'react' import { TLEditorSnapshot, Tldraw, getSnapshot, loadSnapshot, useEditor } from 'tldraw' import 'tldraw/tldraw.css' import _jsonSnapshot from './snapshot.json' // There's a guide at the bottom of this file! const jsonSnapshot = _jsonSnapshot as any as TLEditorSnapshot // [1] function SnapshotToolbar() { const editor = useEditor() const save = useCallback(() => { // [2] const { document, session } = getSnapshot(editor.store) // [3] localStorage.setItem('snapshot', JSON.stringify({ document, session })) }, [editor]) const load = useCallback(() => { const snapshot = localStorage.getItem('snapshot') if (!snapshot) return // [4] loadSnapshot(editor.store, JSON.parse(snapshot)) }, [editor]) const [showCheckMark, setShowCheckMark] = useState(false) useEffect(() => { if (showCheckMark) { const timeout = setTimeout(() => { setShowCheckMark(false) }, 1000) return () => clearTimeout(timeout) } return }) return (

Saved ✅

) } export default function SnapshotExample() { return (

) } /* [1] We'll add a toolbar to the top-right of the editor viewport that allows the user to save and load snapshots. [2] Call `getSnapshot(editor.store)` to get the current state of the editor [3] The 'document' state is the set of shapes and pages and images etc. The 'session' state is the state of the editor like the current page, camera positions, zoom level, etc. You probably need to store these separately if you're building a multi-user app, so that you can store per-user session state. For this example we'll just store them together in localStorage. [4] Call `loadSnapshot()` to load a snapshot into the editor You can omit the `session` state, or load it later on it's own. e.g. loadSnapshot(editor.store, { document }) then optionally later loadSnapshot(editor.store, { session }) [5] You can load an initial snapshot into the editor by passing it to the `snapshot` prop. */

Snapshots