Skip to main content

Examples

Time Machine

Drawing canvas with undo/redo, export/import, replay, and changesets.

Try it

Loading example…

Draw on the canvas, then use Undo/Redo to navigate history. Export to save state as JSON, or use Changesets to group multiple strokes into a single undo step.

How it works

Each brush stroke is a fact mutation captured as a time-travel snapshot. Directive’s built-in HistoryManager provides the full history API.

  1. Undo / Redo – Navigate through snapshot history with goBack() and goForward()
  2. Export / Import – Serialize all snapshots to JSON and restore them later
  3. Replay – Animate through the entire history to see strokes appear progressively
  4. Changesets – Group multiple mutations into a single atomic undo step using beginChangeset() / endChangeset()

Source code

main.ts
// Source file "main.ts" not found

Stay in the loop. Sign up for our newsletter.

We care about your data. We'll never share your email.

Powered by Directive. This signup uses a Directive module with facts, derivations, constraints, and resolvers – zero useState, zero useEffect. Read how it works →