Undo and redo

Client-side undo and redo with full transaction history.

Every mutation records a history entry. Undo reverses it; redo replays it.

Basic usage

Call undo() and redo() after any mutation to walk the history stack.


await client.create("Task", { title: "Task 1", status: "todo" });
await client.update("Task", "task-123", { title: "Updated" });

if (client.canUndo()) {
  await client.undo

Undo and redo: Client-side undo and redo... · Strata Sync


import { useSyncClientInstance } from "@stratasync/react";

function UndoRedoButtons() {
  const client = useSyncClientInstance();

  return (
    <div>
      <button onClick={() => client.undo()} disabled={!client.canUndo()}>
        Undo
      </button>
      <button onClick={() => client.redo()} disabled={!client.canRedo()}>
        Redo
      </button>
    </div>
  );
}


import { useEffect } from "react";
import { useSyncClientInstance } from "@stratasync/react";

function useUndoRedoShortcuts() {
  const client = useSyncClientInstance();

  useEffect(() => {
    const handler = (e: KeyboardEvent) => {
      if (!(e.metaKey || e.ctrlKey)) return;

      if (e.key === "z" && !e.shiftKey) {
        e.preventDefault();
        client.undo();
      } else if (e.key === "z" && e.shiftKey) {
        e.preventDefault();
        client.redo();
      }
    };

    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [client]);
}

Undo and redo

Basic usage

Undo and redo

Basic usage

API reference

canUndo()

canRedo()

undo()

redo()

How it works

History and the outbox

Stack behavior

React integration

Keyboard shortcuts