← Back to Home

⏱️ Time Travel - Undo/Redo Made Easy

Undo/redo functionality with history tracking using TimeTravelPlugin

📚 What You'll Learn

  • Implement undo/redo functionality easily
  • Track signal history automatically
  • Navigate through state timeline (jump to any point)
  • Build powerful debugging and user-facing features

🎮 Try It: Time Travel Controls

Make changes, then undo/redo or jump to any point in history!

0
Current Value (History: 1 states)

📜History Timeline

0State #0
← Current

💡 How It Works

  • Every signal change is recorded in history
  • Click Undo/Redo to navigate through states
  • Click any history entry to jump to that state
  • Perfect for debugging and user-facing undo/redo features
import { createSignal } from 'signalforge/core';
import { TimeTravelPlugin } from 'signalforge/plugins';

const count = createSignal(0);
const timeTravel = new TimeTravelPlugin();

// Track signal changes
timeTravel.trackSignal(count, 'counter');

// Make changes
count.set(1);
count.set(2);
count.set(3);

// Time travel!
timeTravel.undo('counter');  // back to 2
timeTravel.undo('counter');  // back to 1
timeTravel.redo('counter');  // forward to 2

// Jump to specific state
timeTravel.jumpTo('counter', 0);  // back to initial state

// Check history
const history = timeTravel.getHistory('counter');
console.log(history); // [{ value: 0, timestamp: ... }, ...]

🌍 Real-World Use Cases

✏️ Text Editors

Undo/redo for document editing

🎨 Drawing Apps

Revert drawing actions step by step

📋 Form Wizards

Navigate back through multi-step forms

🐛 Debugging

Replay state changes to find bugs

💡 Best Practices

📏
Limit history size

Keep last 50-100 states to avoid memory issues.

💾
Store snapshots, not references

Deep clone objects to prevent accidental mutations.

⏱️
Consider using TimeTravelPlugin

Built-in plugin for automatic undo/redo support.

Batch operations

Group multiple changes into one history entry.

🎓 Next Steps

Master time travel? Try these demos: