Back to Tldraw

Timeline scrubber

apps/examples/src/examples/use-cases/timeline-scrubber/README.md

5.4.0704 B
Original Source

Record every document change as a diff and scrub back and forth through the history with a slider.


editor.store.listen (scoped to document changes from the user source) captures a RecordsDiff for every edit. Dragging the slider collects the diffs between the current and target positions, squashes them with squashRecordDiffs, reverses them with reverseRecordsDiff when going backwards, and applies the result with store.applyDiff inside store.mergeRemoteChanges so the listener does not record the time travel itself.

Try drawing a few shapes, then drag the slider back. Make a change while scrubbed back and the later entries are discarded, starting a new branch from that point.