diff --git a/src/json-crdt-extensions/peritext/__tests__/Peritext.render-block.spec.ts b/src/json-crdt-extensions/peritext/__tests__/Peritext.render-block.spec.ts
index f47715508b..f54208a2de 100644
--- a/src/json-crdt-extensions/peritext/__tests__/Peritext.render-block.spec.ts
+++ b/src/json-crdt-extensions/peritext/__tests__/Peritext.render-block.spec.ts
@@ -5,7 +5,7 @@ import {render} from './render';
 
 const runInlineSlicesTests = (
   desc: string,
-  insertNumbers = (editor: Editor) => editor.insert('abcdefghijklmnopqrstuvwxyz'),
+  insertNumbers = (editor: Editor) => void editor.insert('abcdefghijklmnopqrstuvwxyz'),
 ) => {
   const setup = () => {
     const model = Model.withLogicalClock();
diff --git a/src/json-crdt-extensions/peritext/editor/Editor.ts b/src/json-crdt-extensions/peritext/editor/Editor.ts
index 2278d3fb56..b1ed858861 100644
--- a/src/json-crdt-extensions/peritext/editor/Editor.ts
+++ b/src/json-crdt-extensions/peritext/editor/Editor.ts
@@ -12,7 +12,7 @@ import {PersistedSlice} from '../slice/PersistedSlice';
 import {ValueSyncStore} from '../../../util/events/sync-store';
 import {formatType} from '../slice/util';
 import {CommonSliceType, type SliceType} from '../slice';
-import {tick} from '../../../json-crdt-patch';
+import {tick, Timespan, type ITimespanStruct} from '../../../json-crdt-patch';
 import type {ChunkSlice} from '../util/ChunkSlice';
 import type {Peritext} from '../Peritext';
 import type {Point} from '../rga/Point';
@@ -182,26 +182,30 @@ export class Editor<T = string> implements Printable {
    * Insert inline text at current cursor position. If cursor selects a range,
    * the range is removed and the text is inserted at the start of the range.
    */
-  public insert0(cursor: Cursor<T>, text: string): void {
+  public insert0(cursor: Cursor<T>, text: string): ITimespanStruct | undefined {
     if (!text) return;
     if (!cursor.isCollapsed()) this.delRange(cursor);
     const after = cursor.start.clone();
     after.refAfter();
     const txt = this.txt;
     const textId = txt.ins(after.id, text);
+    const span = new Timespan(textId.sid, textId.time, text.length);
     const shift = text.length - 1;
     const point = txt.point(shift ? tick(textId, shift) : textId, Anchor.After);
     cursor.set(point, point, CursorAnchor.Start);
+    return span;
   }
 
   /**
    * Inserts text at the cursor positions and collapses cursors, if necessary.
    * The applies any pending inline formatting to the inserted text.
    */
-  public insert(text: string): void {
+  public insert(text: string): ITimespanStruct[] {
+    const spans: ITimespanStruct[] = [];
     if (!this.hasCursor()) this.addCursor();
     for (let cursor: Cursor<T> | undefined, i = this.cursors0(); (cursor = i()); ) {
-      this.insert0(cursor, text);
+      const span = this.insert0(cursor, text);
+      if (span) spans.push(span);
       const pending = this.pending.value;
       if (pending.size) {
         this.pending.next(new Map());
@@ -211,6 +215,7 @@ export class Editor<T = string> implements Printable {
         for (const [type, data] of pending) this.toggleRangeExclFmt(range, type, data);
       }
     }
+    return spans;
   }
 
   /**
diff --git a/src/json-crdt-extensions/peritext/editor/__tests__/Editor-movement.spec.ts b/src/json-crdt-extensions/peritext/editor/__tests__/Editor-movement.spec.ts
index 024ad7d1af..b7e47e5723 100644
--- a/src/json-crdt-extensions/peritext/editor/__tests__/Editor-movement.spec.ts
+++ b/src/json-crdt-extensions/peritext/editor/__tests__/Editor-movement.spec.ts
@@ -320,7 +320,12 @@ const runTestsWithAlphabetKit = (setup: () => Kit) => {
 
 runAlphabetKitTestSuite(runTestsWithAlphabetKit);
 
-const setup = (insert = (editor: Editor) => editor.insert('Hello world!'), sid?: number) => {
+const setup = (
+  insert = (editor: Editor) => {
+    editor.insert('Hello world!');
+  },
+  sid?: number,
+) => {
   const model = Model.create(void 0, sid);
   model.api.root({
     text: '',
diff --git a/src/json-crdt-extensions/peritext/editor/__tests__/Editor-selection.spec.ts b/src/json-crdt-extensions/peritext/editor/__tests__/Editor-selection.spec.ts
index d7d086a7ad..b579dd9349 100644
--- a/src/json-crdt-extensions/peritext/editor/__tests__/Editor-selection.spec.ts
+++ b/src/json-crdt-extensions/peritext/editor/__tests__/Editor-selection.spec.ts
@@ -4,7 +4,12 @@ import {Anchor} from '../../rga/constants';
 import {CursorAnchor} from '../../slice/constants';
 import type {Editor} from '../Editor';
 
-const setup = (insert = (editor: Editor) => editor.insert('Hello world!'), sid?: number) => {
+const setup = (
+  insert = (editor: Editor<string>) => {
+    editor.insert('Hello world!');
+  },
+  sid?: number,
+) => {
   const model = Model.create(void 0, sid);
   model.api.root({
     text: '',
diff --git a/src/json-crdt-peritext-ui/__demos__/components/App.tsx b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
index 39ce171b55..e7b1872097 100644
--- a/src/json-crdt-peritext-ui/__demos__/components/App.tsx
+++ b/src/json-crdt-peritext-ui/__demos__/components/App.tsx
@@ -30,6 +30,13 @@ export const App: React.FC = () => {
     return [model, peritext] as const;
   });
 
+  React.useEffect(() => {
+    model.api.autoFlush(true);
+    return () => {
+      model.api.stopAutoFlush?.();
+    };
+  }, [model]);
+
   const plugins = React.useMemo(() => {
     const cursorPlugin = new CursorPlugin();
     const toolbarPlugin = new ToolbarPlugin();
diff --git a/src/json-crdt-peritext-ui/dom/DomController.ts b/src/json-crdt-peritext-ui/dom/DomController.ts
index 5b38c93556..588372080f 100644
--- a/src/json-crdt-peritext-ui/dom/DomController.ts
+++ b/src/json-crdt-peritext-ui/dom/DomController.ts
@@ -1,16 +1,19 @@
 import {printTree, type Printable} from 'tree-dump';
-import {InputController} from '../dom/InputController';
-import {CursorController} from '../dom/CursorController';
-import {RichTextController} from '../dom/RichTextController';
-import {KeyController} from '../dom/KeyController';
-import {CompositionController} from '../dom/CompositionController';
+import {InputController} from './InputController';
+import {CursorController} from './CursorController';
+import {RichTextController} from './RichTextController';
+import {KeyController} from './KeyController';
+import {CompositionController} from './CompositionController';
+import {AnnalsController} from './annals/AnnalsController';
 import type {PeritextEventDefaults} from '../events/defaults/PeritextEventDefaults';
 import type {PeritextEventTarget} from '../events/PeritextEventTarget';
 import type {PeritextRenderingSurfaceApi, UiLifeCycles} from '../dom/types';
+import type {Log} from '../../json-crdt/log/Log';
 
 export interface DomControllerOpts {
   source: HTMLElement;
   events: PeritextEventDefaults;
+  log: Log;
 }
 
 export class DomController implements UiLifeCycles, Printable, PeritextRenderingSurfaceApi {
@@ -20,9 +23,10 @@ export class DomController implements UiLifeCycles, Printable, PeritextRendering
   public readonly input: InputController;
   public readonly cursor: CursorController;
   public readonly richText: RichTextController;
+  public readonly annals: AnnalsController;
 
   constructor(public readonly opts: DomControllerOpts) {
-    const {source, events} = opts;
+    const {source, events, log} = opts;
     const {txt} = events;
     const et = (this.et = opts.events.et);
     const keys = (this.keys = new KeyController({source}));
@@ -30,6 +34,7 @@ export class DomController implements UiLifeCycles, Printable, PeritextRendering
     this.input = new InputController({et, source, txt, comp});
     this.cursor = new CursorController({et, source, txt, keys});
     this.richText = new RichTextController({et, source, txt});
+    this.annals = new AnnalsController({et, txt, log});
   }
 
   /** -------------------------------------------------- {@link UiLifeCycles} */
@@ -40,6 +45,7 @@ export class DomController implements UiLifeCycles, Printable, PeritextRendering
     this.input.start();
     this.cursor.start();
     this.richText.start();
+    this.annals.start();
   }
 
   public stop(): void {
@@ -48,6 +54,7 @@ export class DomController implements UiLifeCycles, Printable, PeritextRendering
     this.input.stop();
     this.cursor.stop();
     this.richText.stop();
+    this.annals.stop();
   }
 
   /** ----------------------------------- {@link PeritextRenderingSurfaceApi} */
@@ -65,6 +72,7 @@ export class DomController implements UiLifeCycles, Printable, PeritextRendering
         (tab) => this.cursor.toString(tab),
         (tab) => this.keys.toString(tab),
         (tab) => this.comp.toString(tab),
+        (tab) => this.annals.toString(tab),
       ])
     );
   }
diff --git a/src/json-crdt-peritext-ui/dom/annals/AnnalsController.ts b/src/json-crdt-peritext-ui/dom/annals/AnnalsController.ts
new file mode 100644
index 0000000000..f343a0322f
--- /dev/null
+++ b/src/json-crdt-peritext-ui/dom/annals/AnnalsController.ts
@@ -0,0 +1,90 @@
+import {WebUndo} from './WebUndo';
+import {printTree, type Printable} from 'tree-dump';
+import type {Patch} from '../../../json-crdt-patch';
+import type {Peritext} from '../../../json-crdt-extensions';
+import type {UiLifeCycles} from '../types';
+import type {RedoCallback, RedoItem, UndoCallback, UndoCollector, UndoItem} from '../../types';
+import type {Log} from '../../../json-crdt/log/Log';
+import type {PeritextEventTarget} from '../../events/PeritextEventTarget';
+
+export interface UndoRedoControllerOpts {
+  log: Log;
+  txt: Peritext;
+  et: PeritextEventTarget;
+}
+
+export class AnnalsController implements UndoCollector, UiLifeCycles, Printable {
+  protected manager = new WebUndo();
+
+  constructor(public readonly opts: UndoRedoControllerOpts) {}
+
+  protected captured = new WeakSet<Patch>();
+
+  /** ------------------------------------------------- {@link UndoCollector} */
+
+  public capture(): void {
+    const currentPatch = this.opts.txt.model.api.builder.patch;
+    this.captured.add(currentPatch);
+  }
+
+  public undo(): void {
+    this.manager.undo();
+  }
+
+  public redo(): void {
+    this.manager.redo();
+  }
+
+  /** -------------------------------------------------- {@link UiLifeCycles} */
+
+  public start(): void {
+    this.manager.start();
+    const {opts, captured} = this;
+    const {txt} = opts;
+    txt.model.api.onFlush.listen((patch) => {
+      const isCaptured = captured.has(patch);
+      if (isCaptured) {
+        captured.delete(patch);
+        const item: UndoItem<Patch, Patch> = [patch, this._undo];
+        this.manager.push(item);
+      }
+    });
+  }
+
+  public stop(): void {
+    this.manager.stop();
+  }
+
+  public readonly _undo: UndoCallback<Patch, Patch> = (doPatch: Patch) => {
+    const {log, et} = this.opts;
+    const patch = log.undo(doPatch);
+    et.dispatch('annals', {
+      action: 'undo',
+      batch: [patch],
+    });
+    // console.log('doPatch', doPatch + '');
+    // console.log('undoPatch', patch + '');
+    return [doPatch, this._redo] as RedoItem<Patch, Patch>;
+  };
+
+  public readonly _redo: RedoCallback<Patch, Patch> = (doPatch: Patch) => {
+    const {log, et} = this.opts;
+    const redoPatch = doPatch.rebase(log.end.clock.time);
+    et.dispatch('annals', {
+      action: 'redo',
+      batch: [redoPatch],
+    });
+    // console.log('doPatch', doPatch + '');
+    // console.log('redoPatch', redoPatch + '');
+    return [redoPatch, this._undo] as RedoItem<Patch, Patch>;
+  };
+
+  /** ----------------------------------------------------- {@link Printable} */
+
+  public toString(tab?: string): string {
+    return (
+      'annals' +
+      printTree(tab, [(tab) => 'undo: ' + this.manager.uStack.length, (tab) => 'redo: ' + this.manager.rStack.length])
+    );
+  }
+}
diff --git a/src/json-crdt-peritext-ui/dom/annals/MemoryUndo.ts b/src/json-crdt-peritext-ui/dom/annals/MemoryUndo.ts
new file mode 100644
index 0000000000..283442af83
--- /dev/null
+++ b/src/json-crdt-peritext-ui/dom/annals/MemoryUndo.ts
@@ -0,0 +1,40 @@
+import type {UndoManager, UndoItem} from '../../types';
+import type {UiLifeCycles} from '../types';
+
+/**
+ * A Memory-based undo manager.
+ */
+export class MemoryUndo implements UndoManager, UiLifeCycles {
+  /** Undo stack. */
+  public uStack: UndoItem[] = [];
+  /** Redo stack. */
+  public rStack: UndoItem[] = [];
+
+  // /** ------------------------------------------------------ {@link UndoRedo} */
+
+  public push<U, R>(undo: UndoItem<U, R>): void {
+    this.rStack = [];
+    this.uStack.push(undo as UndoItem);
+  }
+
+  undo(): void {
+    const undo = this.uStack.pop();
+    if (undo) {
+      const redo = undo[1](undo[0]);
+      this.rStack.push(redo);
+    }
+  }
+
+  redo(): void {
+    const redo = this.rStack.pop();
+    if (redo) {
+      const undo = redo[1](redo[0]);
+      this.uStack.push(undo);
+    }
+  }
+
+  /** -------------------------------------------------- {@link UiLifeCycles} */
+
+  public start(): void {}
+  public stop(): void {}
+}
diff --git a/src/json-crdt-peritext-ui/dom/annals/WebUndo.ts b/src/json-crdt-peritext-ui/dom/annals/WebUndo.ts
new file mode 100644
index 0000000000..7bdeb72e01
--- /dev/null
+++ b/src/json-crdt-peritext-ui/dom/annals/WebUndo.ts
@@ -0,0 +1,103 @@
+import {saveSelection} from '../util';
+import type {UndoManager, UndoItem} from '../../types';
+import type {UiLifeCycles} from '../types';
+
+/**
+ * A DOM-based undo manager. Integrates with native undo/redo functionality of
+ * the browser. Supports user Ctrl+Z and Ctrl+Shift+Z shortcuts and application
+ * context menu undo/redo events.
+ */
+export class WebUndo implements UndoManager, UiLifeCycles {
+  /** Whether we are in a process of pushing a new undo item. */
+  private _push: boolean = false;
+  /** The DOM element, which keeps text content for native undo/redo integration. */
+  protected el!: HTMLElement;
+  /** Undo stack. */
+  public uStack: UndoItem[] = [];
+  /** Redo stack. */
+  public rStack: UndoItem[] = [];
+
+  protected _undo() {
+    const undo = this.uStack.pop();
+    if (undo) {
+      const redo = undo[1](undo[0]);
+      this.rStack.push(redo);
+    }
+  }
+
+  protected _redo() {
+    const redo = this.rStack.pop();
+    if (redo) {
+      const undo = redo[1](redo[0]);
+      this.uStack.push(undo);
+    }
+  }
+
+  // /** ------------------------------------------------------ {@link UndoRedo} */
+
+  public push<U, R>(undo: UndoItem<U, R>): void {
+    const el = this.el;
+    const restoreSelection = saveSelection();
+    try {
+      this._push = true;
+      this.rStack = [];
+      el.setAttribute('aria-hidden', 'false');
+      el.focus();
+      document.execCommand?.('insertText', false, '.');
+      const tlen = this.el.innerText.length;
+      if (tlen - 1 === this.uStack.length) this.uStack.push(undo as UndoItem);
+    } finally {
+      el.blur();
+      this._push = false;
+      el.setAttribute('aria-hidden', 'true');
+      restoreSelection?.();
+    }
+  }
+
+  undo(): void {
+    document?.execCommand?.('undo');
+  }
+
+  redo(): void {
+    document?.execCommand?.('redo');
+  }
+
+  /** -------------------------------------------------- {@link UiLifeCycles} */
+
+  public start(): void {
+    const el = (this.el = document.createElement('div'));
+    el.tabIndex = -1;
+    el.contentEditable = 'true';
+    el.setAttribute('aria-hidden', 'true');
+    const style = el.style;
+    style.pointerEvents = 'none';
+    style.position = 'fixed';
+    style.fontSize = '1px';
+    style.top = '-1000px';
+    style.opacity = '0';
+    document.body.appendChild(el);
+    el.addEventListener('focus', this.onFocus);
+    el.addEventListener('input', this.onInput);
+  }
+
+  public stop(): void {
+    const el = this.el;
+    document.body.removeChild(el);
+    el.removeEventListener('focus', this.onFocus);
+    el.removeEventListener('input', this.onInput);
+  }
+
+  public readonly onFocus = () => {
+    const el = this.el;
+    setTimeout(() => el.blur(), 0);
+  };
+
+  public readonly onInput = () => {
+    const tlen = this.el.innerText.length;
+    if (!this._push) {
+      const {uStack: undo, rStack: redo} = this;
+      while (undo.length && undo.length > tlen) this._undo();
+      while (redo.length && undo.length < tlen) this._redo();
+    }
+  };
+}
diff --git a/src/json-crdt-peritext-ui/dom/types.ts b/src/json-crdt-peritext-ui/dom/types.ts
index dcd5ef2503..d4cbb76fc0 100644
--- a/src/json-crdt-peritext-ui/dom/types.ts
+++ b/src/json-crdt-peritext-ui/dom/types.ts
@@ -1,3 +1,8 @@
+/**
+ * @todo Unify this with {@link UiLifeCycles}, join interfaces.
+ * @todo Rename this to something like "disposable", as it does not have to be
+ *     a UI component.
+ */
 export interface UiLifeCycles {
   /** Called when UI component is mounted. */
   start(): void;
diff --git a/src/json-crdt-peritext-ui/dom/util.ts b/src/json-crdt-peritext-ui/dom/util.ts
index c9662b1577..36919db623 100644
--- a/src/json-crdt-peritext-ui/dom/util.ts
+++ b/src/json-crdt-peritext-ui/dom/util.ts
@@ -12,3 +12,20 @@ export const getCursorPosition: GetCursorPosition = (<any>document).caretPositio
 
 export const unit = (event: KeyboardEvent): '' | 'word' | 'line' =>
   event.metaKey ? 'line' : event.altKey || event.ctrlKey ? 'word' : '';
+
+/**
+ * Save the current browser selection, so that it can be restored later. Returns
+ * a callback to restore the selection.
+ *
+ * @returns Callback to restore the selection.
+ */
+export const saveSelection = (): (() => void) | undefined => {
+  const selection = window?.getSelection();
+  if (!selection) return;
+  const ranges: Range[] = [];
+  for (let i = 0; i < selection.rangeCount; i++) ranges.push(selection.getRangeAt(i));
+  return () => {
+    selection.removeAllRanges();
+    for (const range of ranges) selection.addRange(range);
+  };
+};
diff --git a/src/json-crdt-peritext-ui/events/clipboard/DomClipboard.ts b/src/json-crdt-peritext-ui/events/clipboard/DomClipboard.ts
index 79f38fe543..359ad7a411 100644
--- a/src/json-crdt-peritext-ui/events/clipboard/DomClipboard.ts
+++ b/src/json-crdt-peritext-ui/events/clipboard/DomClipboard.ts
@@ -1,3 +1,4 @@
+import {saveSelection} from '../../dom/util';
 import type {PeritextClipboard, PeritextClipboardData} from './types';
 
 const toText = (buf: Uint8Array) => new TextDecoder().decode(buf);
@@ -11,8 +12,7 @@ const writeSync = (data: PeritextClipboardData<string>): boolean => {
     const copySupported = queryCommandSupported?.('copy') ?? true;
     const cutSupported = queryCommandSupported?.('cut') ?? true;
     if (!copySupported && !cutSupported) return false;
-    const ranges = [];
-    for (let i = 0; i < selection.rangeCount; i++) ranges.push(selection.getRangeAt(i));
+    const restoreSelection = saveSelection();
     const value = data['text/plain'] ?? '';
     const text = typeof value === 'string' ? value : '';
     const span = document.createElement('span');
@@ -63,8 +63,7 @@ const writeSync = (data: PeritextClipboardData<string>): boolean => {
         // span.removeEventListener('copy', listener);
         // span.removeEventListener('cut', listener);
         document.body.removeChild(span);
-        selection.removeAllRanges();
-        for (const range of ranges) selection.addRange(range);
+        restoreSelection?.();
       } catch {}
     }
   } catch {
diff --git a/src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts b/src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts
index 43f19b9ee5..dab2f26fc4 100644
--- a/src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts
+++ b/src/json-crdt-peritext-ui/events/defaults/PeritextEventDefaults.ts
@@ -1,4 +1,5 @@
 import {CursorAnchor} from '../../../json-crdt-extensions/peritext/slice/constants';
+import {placeCursor} from './annals';
 import type {Range} from '../../../json-crdt-extensions/peritext/rga/Range';
 import type {PeritextDataTransfer} from '../../../json-crdt-extensions/peritext/transfer/PeritextDataTransfer';
 import type {PeritextEventHandlerMap, PeritextEventTarget} from '../PeritextEventTarget';
@@ -6,6 +7,7 @@ import type {Peritext} from '../../../json-crdt-extensions/peritext';
 import type {EditorSlices} from '../../../json-crdt-extensions/peritext/editor/EditorSlices';
 import type * as events from '../types';
 import type {PeritextClipboard, PeritextClipboardData} from '../clipboard/types';
+import type {UndoCollector} from '../../types';
 
 const toText = (buf: Uint8Array) => new TextDecoder().decode(buf);
 
@@ -22,6 +24,8 @@ export interface PeritextEventDefaultsOpts {
  * will not be executed.
  */
 export class PeritextEventDefaults implements PeritextEventHandlerMap {
+  public undo?: UndoCollector;
+
   public constructor(
     public readonly txt: Peritext,
     public readonly et: PeritextEventTarget,
@@ -32,7 +36,9 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
 
   public readonly insert = (event: CustomEvent<events.InsertDetail>) => {
     const text = event.detail.text;
-    this.txt.editor.insert(text);
+    const editor = this.txt.editor;
+    editor.insert(text);
+    this.undo?.capture();
   };
 
   public readonly delete = (event: CustomEvent<events.DeleteDetail>) => {
@@ -43,6 +49,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
       editor.cursor.set(point);
     }
     editor.delete(len, unit);
+    this.undo?.capture();
   };
 
   public readonly cursor = (event: CustomEvent<events.CursorDetail>) => {
@@ -140,6 +147,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         break;
       }
     }
+    this.undo?.capture();
   };
 
   public readonly marker = (event: CustomEvent<events.MarkerDetail>) => {
@@ -158,6 +166,7 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         break;
       }
     }
+    this.undo?.capture();
   };
 
   public readonly buffer = async (event: CustomEvent<events.BufferDetail>) => {
@@ -363,5 +372,14 @@ export class PeritextEventDefaults implements PeritextEventHandlerMap {
         break;
       }
     }
+    this.undo?.capture();
+  };
+
+  public readonly annals = (event: CustomEvent<events.AnnalsDetail>) => {
+    const {batch} = event.detail;
+    this.txt.model.applyBatch(batch);
+    const txt = this.txt;
+    const cursor = placeCursor(txt, batch);
+    if (cursor) txt.editor.cursor.setRange(cursor);
   };
 }
diff --git a/src/json-crdt-peritext-ui/events/defaults/annals.ts b/src/json-crdt-peritext-ui/events/defaults/annals.ts
new file mode 100644
index 0000000000..623df30b0a
--- /dev/null
+++ b/src/json-crdt-peritext-ui/events/defaults/annals.ts
@@ -0,0 +1,40 @@
+import type {Peritext} from '../../../json-crdt-extensions';
+import {Anchor} from '../../../json-crdt-extensions/peritext/rga/constants';
+import {DelOp, equal, InsArrOp, InsBinOp, InsStrOp, type Patch, Timestamp} from '../../../json-crdt-patch';
+import type {Range} from '../../../json-crdt-extensions/peritext/rga/Range';
+
+/**
+ * Given an undo/redo patch/batch, calculates a good cursor position to place
+ * the cursor after the patch is applied, so that the user can continue typing
+ * from the same logical position.
+ *
+ * @param patch Undo/Redo patch
+ * @returns Range
+ */
+export const placeCursor = (txt: Peritext, batch: Patch[]): Range | undefined => {
+  const batchLength = batch.length;
+  for (let j = batchLength - 1; j >= 0; j--) {
+    const patch = batch[j];
+    const ops = patch.ops;
+    const length = ops.length;
+    for (let i = length - 1; i >= 0; i--) {
+      const op = ops[i];
+      if (op instanceof InsStrOp || op instanceof InsBinOp || op instanceof InsArrOp) {
+        const opId = op.id;
+        const lastCharId = new Timestamp(opId.sid, opId.time + op.span() - 1);
+        const point = txt.point(lastCharId, Anchor.After);
+        const cursor = txt.range(point);
+        return cursor;
+      } else if (op instanceof DelOp && equal(op.obj, txt.str.id)) {
+        const lastSpan = op.what[op.what.length - 1];
+        if (lastSpan) {
+          const point = txt.point(lastSpan, Anchor.Before);
+          point.halfstep(-1);
+          const cursor = txt.range(point);
+          return cursor;
+        }
+      }
+    }
+  }
+  return;
+};
diff --git a/src/json-crdt-peritext-ui/events/types.ts b/src/json-crdt-peritext-ui/events/types.ts
index 133de4dc89..42ea04d2f9 100644
--- a/src/json-crdt-peritext-ui/events/types.ts
+++ b/src/json-crdt-peritext-ui/events/types.ts
@@ -1,6 +1,7 @@
 import type {Point} from '../../json-crdt-extensions/peritext/rga/Point';
 import type {Position as EditorPosition} from '../../json-crdt-extensions/peritext/editor/types';
 import type {SliceType} from '../../json-crdt-extensions/peritext/slice/types';
+import type {Patch} from '../../json-crdt-patch';
 
 /**
  * Dispatched every time any other event is dispatched.
@@ -282,8 +283,8 @@ export interface BufferDetail {
    *
    * - `auto`: Automatically determine the format based on the data in the
    *   clipboard.
-   * - `json`: Specifies the default Peritext {@link Editor} export/import format
-   *   in JSON POJO format.
+   * - `json`: Specifies the default Peritext {@link Editor} export/import
+   *   format in JSON POJO format.
    * - `jsonml`: HTML markup in JSONML format.
    * - `hast`: HTML markup in HAST format.
    * - `text`: Plain text format. Copy and paste text only.
@@ -316,6 +317,21 @@ export interface BufferDetail {
   };
 }
 
+/**
+ * The "annals" event manages undo and redo actions, typically triggered by
+ * common keyboard shortcuts like `Ctrl+Z` and `Ctrl+Shift+Z`.
+ */
+export interface AnnalsDetail {
+  /** The action to perform. */
+  action: 'undo' | 'redo';
+
+  /**
+   * The list of {@link Patch} that will be applied to the document to undo or
+   * redo the action, unless the action is cancelled.
+   */
+  batch: [Patch];
+}
+
 /**
  * Position represents a caret position in the document. The position can either
  * be an instance of {@link Point} or a numeric position in the document, which
@@ -339,4 +355,5 @@ export type PeritextEventDetailMap = {
   format: FormatDetail;
   marker: MarkerDetail;
   buffer: BufferDetail;
+  annals: AnnalsDetail;
 };
diff --git a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
index d810e95324..c44dc8774b 100644
--- a/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
+++ b/src/json-crdt-peritext-ui/plugins/toolbar/TopToolbar/index.tsx
@@ -78,6 +78,13 @@ export const TopToolbar: React.FC<TopToolbarProps> = ({ctx}) => {
       {blockGroupButton(CommonSliceType.p, 'Paragraph')}
       {blockGroupButton(CommonSliceType.blockquote, 'Blockquote')}
       {blockGroupButton(CommonSliceType.codeblock, 'Code Block')}
+      <ButtonSeparator />
+      {button('Undo', () => {
+        ctx.dom?.annals.undo();
+      })}
+      {button('Redo', () => {
+        ctx.dom?.annals.redo();
+      })}
     </ButtonGroup>
   );
 };
diff --git a/src/json-crdt-peritext-ui/react/PeritextView.tsx b/src/json-crdt-peritext-ui/react/PeritextView.tsx
index 8fccd38f49..d2a23f701c 100644
--- a/src/json-crdt-peritext-ui/react/PeritextView.tsx
+++ b/src/json-crdt-peritext-ui/react/PeritextView.tsx
@@ -62,6 +62,8 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
     return state;
   }, [peritext, plugins, rerender, onState]);
 
+  React.useEffect(() => state.start(), [state]);
+
   // biome-ignore lint: lint/correctness/useExhaustiveDependencies
   const ref = React.useCallback(
     (el: null | HTMLDivElement) => {
@@ -75,7 +77,8 @@ export const PeritextView: React.FC<PeritextViewProps> = React.memo((props) => {
         return;
       }
       if (dom && dom.opts.source === el) return;
-      const ctrl = new DomController({source: el, events: state.events});
+      const ctrl = new DomController({source: el, events: state.events, log: state.log});
+      state.events.undo = ctrl.annals;
       ctrl.start();
       state.dom = ctrl;
       setDom(ctrl);
diff --git a/src/json-crdt-peritext-ui/react/state.ts b/src/json-crdt-peritext-ui/react/state.ts
index 571761ab12..f297ce3d91 100644
--- a/src/json-crdt-peritext-ui/react/state.ts
+++ b/src/json-crdt-peritext-ui/react/state.ts
@@ -1,15 +1,27 @@
+import {Log} from '../../json-crdt/log/Log';
+import {Model} from '../../json-crdt/model';
 import type {PeritextPlugin} from './types';
 import type {Peritext} from '../../json-crdt-extensions/peritext/Peritext';
 import type {DomController} from '../dom/DomController';
 import type {PeritextEventDefaults} from '../events/defaults/PeritextEventDefaults';
+import type {UiLifeCyclesRender} from '../dom/types';
 
-export class PeritextSurfaceState {
+export class PeritextSurfaceState implements UiLifeCyclesRender {
   public dom?: DomController = void 0;
+  public log: Log;
 
   constructor(
     public readonly peritext: Peritext,
     public readonly events: PeritextEventDefaults,
     public readonly rerender: () => void,
     public readonly plugins: PeritextPlugin[],
-  ) {}
+  ) {
+    this.log = Log.from(peritext.model);
+  }
+
+  public start() {
+    return () => {
+      this.log.destroy();
+    };
+  }
 }
diff --git a/src/json-crdt-peritext-ui/types.ts b/src/json-crdt-peritext-ui/types.ts
new file mode 100644
index 0000000000..2b85b948cf
--- /dev/null
+++ b/src/json-crdt-peritext-ui/types.ts
@@ -0,0 +1,28 @@
+export interface UndoCollector {
+  /**
+   * Mark the currently minted change {@link Patch} in {@link Builder} for undo.
+   * It will be picked up during the next flush.
+   */
+  capture(): void;
+}
+
+export interface UndoManager {
+  push<U, R>(undo: UndoItem<U, R>): void;
+  undo(): void;
+  redo(): void;
+}
+
+export type UndoItem<UndoState = unknown, RedoState = unknown> = [
+  state: UndoState,
+  undo: UndoCallback<UndoState, RedoState>,
+];
+export type UndoCallback<UndoState = unknown, RedoState = unknown> = (
+  state: UndoState,
+) => RedoItem<RedoState, UndoState>;
+export type RedoItem<RedoState = unknown, UndoState = unknown> = [
+  state: RedoState,
+  redo: RedoCallback<RedoState, UndoState>,
+];
+export type RedoCallback<RedoState = unknown, UndoState = unknown> = (
+  state: RedoState,
+) => UndoItem<UndoState, RedoState>;
diff --git a/src/json-crdt/log/Log.ts b/src/json-crdt/log/Log.ts
index 470fe3fb84..2e581d2307 100644
--- a/src/json-crdt/log/Log.ts
+++ b/src/json-crdt/log/Log.ts
@@ -1,9 +1,24 @@
 import {AvlMap} from 'sonic-forest/lib/avl/AvlMap';
 import {first, next} from 'sonic-forest/lib/util';
-import type {FanOutUnsubscribe} from 'thingies/lib/fanout';
 import {printTree} from 'tree-dump/lib/printTree';
-import {type ITimestampStruct, type Patch, compare} from '../../json-crdt-patch';
+import {listToUint8} from '@jsonjoy.com/util/lib/buffers/concat';
 import {Model} from '../model';
+import {toSchema} from '../schema/toSchema';
+import {
+  DelOp,
+  type ITimestampStruct,
+  InsArrOp,
+  InsBinOp,
+  InsObjOp,
+  InsStrOp,
+  InsValOp,
+  InsVecOp,
+  type Patch,
+  Timespan,
+  compare,
+} from '../../json-crdt-patch';
+import {ArrNode, BinNode, ObjNode, StrNode, ValNode, VecNode} from '../nodes';
+import type {FanOutUnsubscribe} from 'thingies/lib/fanout';
 import type {Printable} from 'tree-dump/lib/types';
 import type {JsonNode} from '../nodes/types';
 
@@ -16,6 +31,8 @@ import type {JsonNode} from '../nodes/types';
  * The log can be used to replay the history of patches to any point in time,
  * from the "start" to the "end" of the log, and return the resulting {@link Model}
  * state.
+ *
+ * @todo Make this implement UILifecycle (start, stop) interface.
  */
 export class Log<N extends JsonNode = JsonNode<any>> implements Printable {
   /**
@@ -29,29 +46,19 @@ export class Log<N extends JsonNode = JsonNode<any>> implements Printable {
    */
   public static fromNewModel<N extends JsonNode = JsonNode<any>>(model: Model<N>): Log<N> {
     const sid = model.clock.sid;
-    const log = new Log<N>(() => Model.create<any>(undefined, sid) as Model<N>);
+    const log = new Log<N>(
+      () => Model.create<any>(undefined, sid) as Model<N>,
+    ); /** @todo Maybe provide second arg to `new Log(...)` */
     const api = model.api;
     if (api.builder.patch.ops.length) log.end.applyPatch(api.flush());
     return log;
   }
 
-  /**
-   * Model factory function that creates a new JSON CRDT model instance, which
-   * is used as the starting point of the log. It is called every time a new
-   * model is needed to replay the log.
-   *
-   * @readonly Internally this function may be updated, but externally it is
-   *           read-only.
-   */
-  public start: () => Model<N>;
-
-  /**
-   * The end of the log, the current state of the document. It is the model
-   * instance that is used to apply new patches to the log.
-   *
-   * @readonly
-   */
-  public readonly end: Model<N>;
+  public static from<N extends JsonNode = JsonNode<any>>(model: Model<N>): Log<N> {
+    const frozen = model.toBinary();
+    const beginning = () => Model.fromBinary<N>(frozen);
+    return new Log<N>(beginning, model);
+  }
 
   /**
    * The collection of patches which are applied to the `start()` model to reach
@@ -66,9 +73,28 @@ export class Log<N extends JsonNode = JsonNode<any>> implements Printable {
   private __onPatch: FanOutUnsubscribe;
   private __onFlush: FanOutUnsubscribe;
 
-  constructor(start: () => Model<N>) {
-    this.start = start;
-    const end = (this.end = start());
+  constructor(
+    /**
+     * Model factory function that creates a new JSON CRDT model instance, which
+     * is used as the starting point of the log. It is called every time a new
+     * model is needed to replay the log.
+     *
+     * @readonly Internally this function may be updated, but externally it is
+     *           read-only.
+     *
+     * @todo Rename to something else to give way to a `start()` in UILifecycle.
+     *     Call "snapshot". Maybe introduce `type Snapshot<N> = () => Model<N>;`.
+     */
+    public start: () => Model<N>,
+
+    /**
+     * The end of the log, the current state of the document. It is the model
+     * instance that is used to apply new patches to the log.
+     *
+     * @readonly
+     */
+    public readonly end: Model<N> = start(),
+  ) {
     const onPatch = (patch: Patch) => {
       const id = patch.getId();
       if (!id) return;
@@ -80,7 +106,7 @@ export class Log<N extends JsonNode = JsonNode<any>> implements Printable {
   }
 
   /**
-   * Call this method to destroy the `PatchLog` instance. It unsubscribes patch
+   * Call this method to destroy the {@link Log} instance. It unsubscribes patch
    * and flush listeners from the `end` model and clears the patch log.
    */
   public destroy() {
@@ -107,12 +133,18 @@ export class Log<N extends JsonNode = JsonNode<any>> implements Printable {
    * with patches replayed up to the given timestamp.
    *
    * @param ts Timestamp ID of the patch to replay to.
+   * @param inclusive If `true`, the patch at the given timestamp `ts` is included,
+   *     otherwise replays up to the patch before the given timestamp. Default is `true`.
    * @returns A new model instance with patches replayed up to the given timestamp.
    */
-  public replayTo(ts: ITimestampStruct): Model<N> {
+  public replayTo(ts: ITimestampStruct, inclusive: boolean = true): Model<N> {
+    // TODO: PERF: Make `.clone()` implicit in `.start()`.
     const clone = this.start().clone();
-    for (let node = first(this.patches.root); node && compare(ts, node.k) >= 0; node = next(node))
+    let cmp: number = 0;
+    for (let node = first(this.patches.root); node && (cmp = compare(ts, node.k)) >= 0; node = next(node)) {
+      if (cmp === 0 && !inclusive) break;
       clone.applyPatch(node.v);
+    }
     return clone;
   }
 
@@ -133,10 +165,117 @@ export class Log<N extends JsonNode = JsonNode<any>> implements Printable {
     this.start = (): Model<N> => {
       const model = oldStart();
       for (const patch of newStartPatches) model.applyPatch(patch);
+      /** @todo Freeze the old model here, by `model.toBinary()`, it needs to be cloned on .start() anyways. */
       return model;
     };
   }
 
+  /**
+   * Creates a patch which reverts the given patch. The RGA insertion operations
+   * are reversed just by deleting the inserted values. All other operations
+   * require time travel to the state just before the patch was applied, so that
+   * a copy of a mutated object can be created and inserted back into the model.
+   *
+   * @param patch The patch to undo
+   * @returns A new patch that undoes the given patch
+   */
+  public undo(patch: Patch): Patch {
+    const ops = patch.ops;
+    const length = ops.length;
+    if (!length) throw new Error('EMPTY_PATCH');
+    const id = patch.getId();
+    let __model: Model<N> | undefined;
+    const getModel = () => __model || (__model = this.replayTo(id!, false));
+    const builder = this.end.api.builder;
+    for (let i = length - 1; i >= 0; i--) {
+      const op = ops[i];
+      const opId = op.id;
+      if (op instanceof InsStrOp || op instanceof InsArrOp || op instanceof InsBinOp) {
+        builder.del(op.obj, [new Timespan(opId.sid, opId.time, op.span())]);
+        continue;
+      }
+      const model = getModel();
+      // TODO: Do not overwrite already deleted values? Or needed for concurrency? Orphaned nodes.
+      if (op instanceof InsValOp) {
+        const val = model.index.get(op.obj);
+        if (val instanceof ValNode) {
+          const schema = toSchema(val.node());
+          const newId = schema.build(builder);
+          builder.setVal(op.obj, newId);
+        }
+      } else if (op instanceof InsObjOp || op instanceof InsVecOp) {
+        const data: (typeof op)['data'] = [];
+        const container = model.index.get(op.obj);
+        for (const [key] of op.data) {
+          let value: JsonNode | undefined;
+          if (container instanceof ObjNode) value = container.get(key + '');
+          else if (container instanceof VecNode) value = container.get(+key);
+          if (value) {
+            const schema = toSchema(value);
+            const newId = schema.build(builder);
+            data.push([key, newId] as any);
+          } else {
+            data.push([key, builder.const(undefined)] as any);
+          }
+        }
+        if (data.length) {
+          if (op instanceof InsObjOp) builder.insObj(op.obj, data as InsObjOp['data']);
+          else if (op instanceof InsVecOp) builder.insVec(op.obj, data as InsVecOp['data']);
+        }
+      } else if (op instanceof DelOp) {
+        const node = model.index.find(op.obj);
+        if (node) {
+          const rga = node.v;
+          if (rga instanceof StrNode) {
+            let str = '';
+            for (const span of op.what) str += rga.spanView(span).join('');
+            let after = op.obj;
+            const firstDelSpan = op.what[0];
+            if (firstDelSpan) {
+              const after2 = rga.prevId(firstDelSpan);
+              if (after2) after = after2;
+            }
+            builder.insStr(op.obj, after, str);
+          } else if (rga instanceof BinNode) {
+            const buffers: Uint8Array[] = [];
+            for (const span of op.what) buffers.push(...rga.spanView(span));
+            let after = op.obj;
+            const firstDelSpan = op.what[0];
+            if (firstDelSpan) {
+              const after2 = rga.prevId(firstDelSpan);
+              if (after2) after = after2;
+            }
+            const blob = listToUint8(buffers);
+            builder.insBin(op.obj, after, blob);
+          } else if (rga instanceof ArrNode) {
+            const copies: ITimestampStruct[] = [];
+            for (const span of op.what) {
+              const ids2 = rga.spanView(span);
+              for (const ids of ids2) {
+                for (const id of ids) {
+                  const node = model.index.get(id);
+                  if (node) {
+                    const schema = toSchema(node);
+                    const newId = schema.build(builder);
+                    copies.push(newId);
+                  }
+                }
+              }
+            }
+            let after = op.obj;
+            const firstDelSpan = op.what[0];
+            if (firstDelSpan) {
+              const after2 = rga.prevId(firstDelSpan);
+              if (after2) after = after2;
+            }
+            builder.insArr(op.obj, after, copies);
+          }
+        }
+      }
+    }
+    return builder.flush();
+  }
+
   // ---------------------------------------------------------------- Printable
 
   public toString(tab?: string) {
diff --git a/src/json-crdt/log/__tests__/Log.spec.ts b/src/json-crdt/log/__tests__/Log.spec.ts
index 2e5f50c32f..ca4641bb08 100644
--- a/src/json-crdt/log/__tests__/Log.spec.ts
+++ b/src/json-crdt/log/__tests__/Log.spec.ts
@@ -1,4 +1,4 @@
-import {s} from '../../../json-crdt-patch';
+import {type DelOp, type InsStrOp, s} from '../../../json-crdt-patch';
 import {Model} from '../../model';
 import {Log} from '../Log';
 
@@ -37,60 +37,296 @@ test('can create a new log from a new model with right starting logical clock',
   expect(log.end.clock.time > 10).toBe(true);
 });
 
-test('can replay to specific patch', () => {
-  const {log} = setup({foo: 'bar'});
-  const model = log.end.clone();
-  model.api.obj([]).set({x: 1});
-  const patch1 = model.api.flush();
-  model.api.obj([]).set({y: 2});
-  const patch2 = model.api.flush();
-  log.end.applyPatch(patch1);
-  log.end.applyPatch(patch2);
-  const model2 = log.replayToEnd();
-  const model3 = log.replayTo(patch1.getId()!);
-  const model4 = log.replayTo(patch2.getId()!);
-  expect(model.view()).toEqual({foo: 'bar', x: 1, y: 2});
-  expect(log.end.view()).toEqual({foo: 'bar', x: 1, y: 2});
-  expect(log.start().view()).toEqual(undefined);
-  expect(model2.view()).toEqual({foo: 'bar', x: 1, y: 2});
-  expect(model3.view()).toEqual({foo: 'bar', x: 1});
-  expect(model4.view()).toEqual({foo: 'bar', x: 1, y: 2});
+describe('.replayTo()', () => {
+  test('can replay to specific patch', () => {
+    const {log} = setup({foo: 'bar'});
+    const model = log.end.clone();
+    model.api.obj([]).set({x: 1});
+    const patch1 = model.api.flush();
+    model.api.obj([]).set({y: 2});
+    const patch2 = model.api.flush();
+    log.end.applyPatch(patch1);
+    log.end.applyPatch(patch2);
+    const model2 = log.replayToEnd();
+    const model3 = log.replayTo(patch1.getId()!);
+    const model4 = log.replayTo(patch2.getId()!);
+    expect(model.view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(log.end.view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(log.start().view()).toEqual(undefined);
+    expect(model2.view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(model3.view()).toEqual({foo: 'bar', x: 1});
+    expect(model4.view()).toEqual({foo: 'bar', x: 1, y: 2});
+  });
+
+  test('can replay to just before a specific patch', () => {
+    const {log} = setup({foo: 'bar'});
+    const model = log.end.clone();
+    model.api.obj([]).set({x: 1});
+    const patch1 = model.api.flush();
+    model.api.obj([]).set({y: 2});
+    const patch2 = model.api.flush();
+    log.end.applyPatch(patch1);
+    log.end.applyPatch(patch2);
+    const model2 = log.replayToEnd();
+    const model3 = log.replayTo(patch1.getId()!, false);
+    const model4 = log.replayTo(patch2.getId()!, false);
+    expect(model.view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(log.end.view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(log.start().view()).toEqual(undefined);
+    expect(model2.view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(model3.view()).toEqual({foo: 'bar'});
+    expect(model4.view()).toEqual({foo: 'bar', x: 1});
+  });
 });
 
-test('can advance the log from start', () => {
-  const {log} = setup({foo: 'bar'});
-  log.end.api.obj([]).set({x: 1});
-  const patch1 = log.end.api.flush();
-  log.end.api.obj([]).set({y: 2});
-  const patch2 = log.end.api.flush();
-  log.end.api.obj([]).set({foo: 'baz'});
-  const patch3 = log.end.api.flush();
-  expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.start().view()).toEqual(undefined);
-  log.advanceTo(patch1.getId()!);
-  expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.start().view()).toEqual({foo: 'bar', x: 1});
-  log.advanceTo(patch2.getId()!);
-  expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.start().view()).toEqual({foo: 'bar', x: 1, y: 2});
-  expect(log.patches.size()).toBe(1);
-  log.advanceTo(patch3.getId()!);
-  expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.start().view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.patches.size()).toBe(0);
+describe('.advanceTo()', () => {
+  test('can advance the log from start', () => {
+    const {log} = setup({foo: 'bar'});
+    log.end.api.obj([]).set({x: 1});
+    const patch1 = log.end.api.flush();
+    log.end.api.obj([]).set({y: 2});
+    const patch2 = log.end.api.flush();
+    log.end.api.obj([]).set({foo: 'baz'});
+    const patch3 = log.end.api.flush();
+    expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.start().view()).toEqual(undefined);
+    log.advanceTo(patch1.getId()!);
+    expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.start().view()).toEqual({foo: 'bar', x: 1});
+    log.advanceTo(patch2.getId()!);
+    expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.start().view()).toEqual({foo: 'bar', x: 1, y: 2});
+    expect(log.patches.size()).toBe(1);
+    log.advanceTo(patch3.getId()!);
+    expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.start().view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.patches.size()).toBe(0);
+  });
+
+  test('can advance multiple patches at once', () => {
+    const {log} = setup({foo: 'bar'});
+    log.end.api.obj([]).set({x: 1});
+    log.end.api.flush();
+    log.end.api.obj([]).set({y: 2});
+    const patch2 = log.end.api.flush();
+    log.end.api.obj([]).set({foo: 'baz'});
+    log.end.api.flush();
+    expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.start().view()).toEqual(undefined);
+    log.advanceTo(patch2.getId()!);
+    expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
+    expect(log.start().view()).toEqual({foo: 'bar', x: 1, y: 2});
+  });
 });
 
-test('can advance multiple patches at once', () => {
-  const {log} = setup({foo: 'bar'});
-  log.end.api.obj([]).set({x: 1});
-  log.end.api.flush();
-  log.end.api.obj([]).set({y: 2});
-  const patch2 = log.end.api.flush();
-  log.end.api.obj([]).set({foo: 'baz'});
-  log.end.api.flush();
-  expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.start().view()).toEqual(undefined);
-  log.advanceTo(patch2.getId()!);
-  expect(log.end.view()).toEqual({foo: 'baz', x: 1, y: 2});
-  expect(log.start().view()).toEqual({foo: 'bar', x: 1, y: 2});
+describe('.undo()', () => {
+  describe('RGA', () => {
+    describe('str', () => {
+      test('can undo string insert', () => {
+        const {log} = setup({str: ''});
+        log.end.api.flush();
+        log.end.api.str(['str']).ins(0, 'a');
+        const patch = log.end.api.flush();
+        expect(patch.ops.length).toBe(1);
+        expect(patch.ops[0].name()).toBe('ins_str');
+        const undo = log.undo(patch);
+        expect(undo.ops.length).toBe(1);
+        expect(undo.ops[0].name()).toBe('del');
+        const del = undo.ops[0] as DelOp;
+        expect(del.what.length).toBe(1);
+        expect(del.what[0].sid).toBe(patch.ops[0].id.sid);
+        expect(del.what[0].time).toBe(patch.ops[0].id.time);
+        expect(del.what[0].span).toBe(1);
+        expect(log.end.view()).toEqual({str: 'a'});
+        log.end.applyPatch(undo);
+        expect(log.end.view()).toEqual({str: ''});
+      });
+
+      test('can undo string delete', () => {
+        const {log} = setup({str: 'a'});
+        log.end.api.flush();
+        log.end.api.str(['str']).del(0, 1);
+        const patch = log.end.api.flush();
+        expect(patch.ops.length).toBe(1);
+        expect(patch.ops[0].name()).toBe('del');
+        const undo = log.undo(patch);
+        expect(undo.ops.length).toBe(1);
+        expect(undo.ops[0].name()).toBe('ins_str');
+        const op = undo.ops[0] as InsStrOp;
+        expect(op.data).toBe('a');
+        expect(op.obj.time).toBe(log.end.api.str(['str']).node.id.time);
+        expect(op.obj.sid).toBe(log.end.api.str(['str']).node.id.sid);
+        expect(op.ref.time).toBe(log.end.api.str(['str']).node.id.time);
+        expect(op.ref.sid).toBe(log.end.api.str(['str']).node.id.sid);
+        expect(log.end.view()).toEqual({str: ''});
+        log.end.applyPatch(undo);
+        expect(log.end.view()).toEqual({str: 'a'});
+      });
+
+      test('can undo string delete - 2', () => {
+        const {log} = setup({str: '12345'});
+        log.end.api.flush();
+        log.end.api.str(['str']).del(1, 1);
+        const patch1 = log.end.api.flush();
+        log.end.api.str(['str']).del(1, 2);
+        const patch2 = log.end.api.flush();
+        const undo2 = log.undo(patch2);
+        const undo1 = log.undo(patch1);
+        expect(log.end.view()).toEqual({str: '15'});
+        log.end.applyPatch(undo2);
+        expect(log.end.view()).toEqual({str: '1345'});
+        log.end.applyPatch(undo1);
+        expect(log.end.view()).toEqual({str: '12345'});
+      });
+    });
+
+    describe('bin', () => {
+      test('can undo blob insert', () => {
+        const {log} = setup({bin: new Uint8Array()});
+        log.end.api.flush();
+        log.end.api.bin(['bin']).ins(0, new Uint8Array([1, 2, 3]));
+        const patch = log.end.api.flush();
+        expect(patch.ops.length).toBe(1);
+        expect(patch.ops[0].name()).toBe('ins_bin');
+        const undo = log.undo(patch);
+        expect(undo.ops.length).toBe(1);
+        expect(undo.ops[0].name()).toBe('del');
+        const del = undo.ops[0] as DelOp;
+        expect(del.what.length).toBe(1);
+        expect(del.what[0].sid).toBe(patch.ops[0].id.sid);
+        expect(del.what[0].time).toBe(patch.ops[0].id.time);
+        expect(del.what[0].span).toBe(3);
+        expect(log.end.view()).toEqual({bin: new Uint8Array([1, 2, 3])});
+        log.end.applyPatch(undo);
+        expect(log.end.view()).toEqual({bin: new Uint8Array([])});
+      });
+
+      test('can undo blob delete', () => {
+        const {log} = setup({bin: new Uint8Array([1, 2, 3])});
+        log.end.api.flush();
+        log.end.api.bin(['bin']).del(1, 1);
+        const patch = log.end.api.flush();
+        const undo = log.undo(patch);
+        expect(log.end.view()).toEqual({bin: new Uint8Array([1, 3])});
+        log.end.applyPatch(undo);
+        expect(log.end.view()).toEqual({bin: new Uint8Array([1, 2, 3])});
+      });
+    });
+
+    describe('arr', () => {
+      test('can undo array insert', () => {
+        const {log} = setup({arr: []});
+        log.end.api.flush();
+        log.end.api.arr(['arr']).ins(0, [s.con(1)]);
+        const patch = log.end.api.flush();
+        expect(patch.ops.length).toBe(2);
+        const insOp = patch.ops.find((op) => op.name() === 'ins_arr')!;
+        expect(log.end.view()).toEqual({arr: [1]});
+        const undo = log.undo(patch);
+        expect(undo.ops.length).toBe(1);
+        expect(undo.ops[0].name()).toBe('del');
+        const del = undo.ops[0] as DelOp;
+        expect(del.what.length).toBe(1);
+        expect(del.what[0].sid).toBe(insOp.id.sid);
+        expect(del.what[0].time).toBe(insOp.id.time);
+        expect(del.what[0].span).toBe(1);
+        expect(log.end.view()).toEqual({arr: [1]});
+        log.end.applyPatch(undo);
+        expect(log.end.view()).toEqual({arr: []});
+      });
+
+      test('can undo "arr" delete', () => {
+        const {log} = setup({arr: [{a: 1}, {a: 2}, {a: 3}]});
+        log.end.api.flush();
+        log.end.api.arr(['arr']).del(1, 1);
+        const patch = log.end.api.flush();
+        const undo = log.undo(patch);
+        expect(log.end.view()).toEqual({arr: [{a: 1}, {a: 3}]});
+        log.end.applyPatch(undo);
+        expect(log.end.view()).toEqual({arr: [{a: 1}, {a: 2}, {a: 3}]});
+      });
+    });
+  });
+
+  describe('LWW', () => {
+    test('can undo object key write', () => {
+      const {log} = setup({obj: {foo: s.con('bar')}});
+      log.end.api.flush();
+      expect(log.end.view()).toEqual({obj: {foo: 'bar'}});
+      log.end.api.obj(['obj']).set({foo: s.con('baz')});
+      expect(log.end.view()).toEqual({obj: {foo: 'baz'}});
+      const patch = log.end.api.flush();
+      expect(patch.ops.length).toBe(2);
+      const insOp = patch.ops.find((op) => op.name() === 'ins_obj')!;
+      const undo = log.undo(patch);
+      expect(undo.ops.length).toBe(2);
+      expect(log.end.view()).toEqual({obj: {foo: 'baz'}});
+      log.end.applyPatch(undo);
+      expect(log.end.view()).toEqual({obj: {foo: 'bar'}});
+    });
+
+    test('can undo object key delete', () => {
+      const {log} = setup({obj: {foo: s.con('bar')}});
+      log.end.api.flush();
+      expect(log.end.view()).toEqual({obj: {foo: 'bar'}});
+      log.end.api.obj(['obj']).del(['foo']);
+      expect(log.end.view()).toEqual({obj: {}});
+      const patch = log.end.api.flush();
+      expect(patch.ops.length).toBe(2);
+      const insOp = patch.ops.find((op) => op.name() === 'ins_obj')!;
+      const undo = log.undo(patch);
+      expect(undo.ops.length).toBe(2);
+      expect(log.end.view()).toEqual({obj: {}});
+      log.end.applyPatch(undo);
+      expect(log.end.view()).toEqual({obj: {foo: 'bar'}});
+    });
+
+    test('can undo vector element write', () => {
+      const {log} = setup({vec: s.vec(s.con('bar'))});
+      log.end.api.flush();
+      expect(log.end.view()).toEqual({vec: ['bar']});
+      log.end.api.vec(['vec']).set([[0, s.con('baz')]]);
+      expect(log.end.view()).toEqual({vec: ['baz']});
+      const patch = log.end.api.flush();
+      expect(patch.ops.length).toBe(2);
+      const insOp = patch.ops.find((op) => op.name() === 'ins_vec')!;
+      const undo = log.undo(patch);
+      expect(undo.ops.length).toBe(2);
+      expect(log.end.view()).toEqual({vec: ['baz']});
+      log.end.applyPatch(undo);
+      expect(log.end.view()).toEqual({vec: ['bar']});
+    });
+
+    test('can undo vector element "delete"', () => {
+      const {log} = setup({vec: s.vec(s.con('bar'))});
+      log.end.api.flush();
+      expect(log.end.view()).toEqual({vec: ['bar']});
+      log.end.api.vec(['vec']).set([[0, s.con(undefined)]]);
+      expect(log.end.view()).toEqual({vec: [undefined]});
+      const patch = log.end.api.flush();
+      expect(patch.ops.length).toBe(2);
+      const insOp = patch.ops.find((op) => op.name() === 'ins_vec')!;
+      const undo = log.undo(patch);
+      expect(undo.ops.length).toBe(2);
+      expect(log.end.view()).toEqual({vec: [undefined]});
+      log.end.applyPatch(undo);
+      expect(log.end.view()).toEqual({vec: ['bar']});
+    });
+
+    test('can undo register write', () => {
+      const {log} = setup({arr: [1]});
+      log.end.api.flush();
+      expect(log.end.view()).toEqual({arr: [1]});
+      log.end.api.val(['arr', 0]).set(2);
+      expect(log.end.view()).toEqual({arr: [2]});
+      const patch = log.end.api.flush();
+      expect(patch.ops.length).toBe(2);
+      const insOp = patch.ops.find((op) => op.name() === 'ins_val')!;
+      const undo = log.undo(patch);
+      expect(undo.ops.length).toBe(2);
+      expect(log.end.view()).toEqual({arr: [2]});
+      log.end.applyPatch(undo);
+      expect(log.end.view()).toEqual({arr: [1]});
+    });
+  });
 });
diff --git a/src/json-crdt/model/Model.ts b/src/json-crdt/model/Model.ts
index 079a0e8740..cb1270fbf0 100644
--- a/src/json-crdt/model/Model.ts
+++ b/src/json-crdt/model/Model.ts
@@ -179,8 +179,8 @@ export class Model<N extends JsonNode = JsonNode<any>> implements Printable {
    *        encoding.
    * @returns An instance of a model.
    */
-  public static readonly fromBinary = (data: Uint8Array): Model => {
-    return decoder.decode(data);
+  public static readonly fromBinary = <N extends JsonNode = JsonNode<any>>(data: Uint8Array): Model<N> => {
+    return decoder.decode(data) as unknown as Model<N>;
   };
 
   /**
diff --git a/src/json-crdt/model/api/ModelApi.ts b/src/json-crdt/model/api/ModelApi.ts
index 8e436a6091..e9b85b8c41 100644
--- a/src/json-crdt/model/api/ModelApi.ts
+++ b/src/json-crdt/model/api/ModelApi.ts
@@ -303,11 +303,12 @@ export class ModelApi<N extends JsonNode = JsonNode> implements SyncStore<JsonNo
    *
    * @returns Callback to stop auto flushing.
    */
-  public autoFlush(): () => void {
+  public autoFlush(drainNow = false): () => void {
     const drain = () => this.builder.patch.ops.length && this.flush();
     const onLocalChangesUnsubscribe = this.onLocalChanges.listen(drain);
     const onBeforeTransactionUnsubscribe = this.onBeforeTransaction.listen(drain);
     const onTransactionUnsubscribe = this.onTransaction.listen(drain);
+    if (drainNow) drain();
     return (this.stopAutoFlush = () => {
       this.stopAutoFlush = undefined;
       onLocalChangesUnsubscribe();
diff --git a/src/json-crdt/nodes/rga/AbstractRga.ts b/src/json-crdt/nodes/rga/AbstractRga.ts
index af92eed76c..b2b70957ee 100644
--- a/src/json-crdt/nodes/rga/AbstractRga.ts
+++ b/src/json-crdt/nodes/rga/AbstractRga.ts
@@ -755,7 +755,7 @@ export abstract class AbstractRga<T> {
     this.count--;
   }
 
-  public findById(after: ITimestampStruct): undefined | Chunk<T> {
+  public findById(after: ITimestampStruct): Chunk<T> | undefined {
     const afterSid = after.sid;
     const afterTime = after.time;
     let curr: Chunk<T> | undefined = this.ids;
@@ -793,6 +793,58 @@ export abstract class AbstractRga<T> {
     return chunk;
   }
 
+  /**
+   * @param id ID of character to start the search from.
+   * @returns Previous ID in the RGA sequence.
+   */
+  public prevId(id: ITimestampStruct): ITimestampStruct | undefined {
+    let chunk = this.findById(id);
+    if (!chunk) return;
+    const time = id.time;
+    if (chunk.id.time < time) return new Timestamp(id.sid, time - 1);
+    chunk = prev(chunk);
+    if (!chunk) return;
+    const prevId = chunk.id;
+    const span = chunk.span;
+    return span > 1 ? new Timestamp(prevId.sid, prevId.time + chunk.span - 1) : prevId;
+  }
+
+  public spanView(span: ITimespanStruct): T[] {
+    const view: T[] = [];
+    let remaining = span.span;
+    const time = span.time;
+    let chunk = this.findById(span);
+    if (!chunk) return view;
+    if (!chunk.del) {
+      if (chunk.span >= remaining + time - chunk.id.time) {
+        const offset = time - chunk.id.time;
+        const end = offset + remaining;
+        const viewChunk = chunk.view().slice(offset, end);
+        view.push(viewChunk);
+        return view;
+      } else {
+        const offset = time - chunk.id.time;
+        const viewChunk = chunk.view().slice(offset, span.span);
+        remaining -= chunk.span - offset;
+        view.push(viewChunk);
+      }
+    }
+    while ((chunk = chunk.s)) {
+      const chunkSpan = chunk.span;
+      if (!chunk.del) {
+        if (chunkSpan > remaining) {
+          const viewChunk = chunk.view().slice(0, remaining);
+          view.push(viewChunk);
+          break;
+        }
+        view.push(chunk.data!);
+      }
+      remaining -= chunkSpan;
+      if (remaining <= 0) break;
+    }
+    return view;
+  }
+
   // ---------------------------------------------------------- Splay balancing
 
   public splay(chunk: Chunk<T>): void {
diff --git a/src/json-crdt/nodes/str/__tests__/StrNode.spec.ts b/src/json-crdt/nodes/str/__tests__/StrNode.spec.ts
index 79c0c5703e..936eb6348a 100644
--- a/src/json-crdt/nodes/str/__tests__/StrNode.spec.ts
+++ b/src/json-crdt/nodes/str/__tests__/StrNode.spec.ts
@@ -1271,6 +1271,129 @@ describe('StrNode', () => {
     });
   });
 
+  describe('.spanView()', () => {
+    test('can get view from beginning of chunk', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456');
+      const view = type.spanView(tss(1, 2, 3));
+      expect(view).toEqual(['123']);
+    });
+
+    test('can get empty view', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456');
+      const view = type.spanView(tss(1, 2, 0));
+      expect(view.join('')).toBe('');
+    });
+
+    test('can get view from beginning to end of single chunk', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456');
+      const view = type.spanView(tss(1, 2, 6));
+      expect(view).toEqual(['123456']);
+    });
+
+    test('can get view starting from middle', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456');
+      const view = type.spanView(tss(1, 4, 2));
+      expect(view).toEqual(['34']);
+    });
+
+    test('can get view starting from middle to end', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456');
+      const view = type.spanView(tss(1, 4, 4));
+      expect(view).toEqual(['3456']);
+    });
+
+    test('can get view across two chunks', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123');
+      type.ins(ts(1, 4), ts(1, 5), '456');
+      type.ins(ts(1, 4), ts(2, 5), 'xxx');
+      const view = type.spanView(tss(1, 2, 4));
+      expect(view).toEqual(['123', '4']);
+    });
+
+    test('can get view across two chunks starting from middle', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123');
+      type.ins(ts(1, 4), ts(1, 5), '456');
+      type.ins(ts(1, 4), ts(2, 5), 'xxx');
+      const view = type.spanView(tss(1, 3, 4));
+      expect(view).toEqual(['23', '45']);
+    });
+
+    test('can get view across two chunks starting from middle - 2', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123');
+      type.ins(ts(1, 4), ts(1, 5), '456');
+      type.ins(ts(1, 4), ts(2, 5), 'xxx');
+      const view = type.spanView(tss(1, 4, 4));
+      expect(view).toEqual(['3', '456']);
+    });
+
+    test('can get view across three chunks', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456789');
+      type.ins(ts(1, 4), ts(2, 5), 'xxx');
+      type.ins(ts(1, 7), ts(3, 5), 'yyy');
+      const view = type.spanView(tss(1, 3, 7));
+      expect(view).toEqual(['23', '456', '78']);
+    });
+
+    test('can get view across three chunks and ignore deleted chunks', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456789');
+      type.ins(ts(1, 4), ts(2, 5), 'xxx');
+      type.ins(ts(1, 7), ts(3, 5), 'yyy');
+      type.delete([tss(1, 4, 4)]);
+      const view = type.spanView(tss(1, 3, 7));
+      expect(view).toEqual(['2', '78']);
+    });
+  });
+
+  describe('.prevId()', () => {
+    test('can iterate through IDs in reverse', () => {
+      const type = new StrNode(ts(1, 1));
+      type.ins(ts(1, 1), ts(1, 2), '123456789');
+      type.ins(ts(1, 4), ts(2, 5), 'xxx');
+      type.ins(ts(1, 7), ts(3, 5), 'yyy');
+      let id = ts(1, 10);
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 9));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 8));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(3, 7));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(3, 6));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(3, 5));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 7));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 6));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 5));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(2, 7));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(2, 6));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(2, 5));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 4));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 3));
+      id = type.prevId(id)!;
+      expect(id).toStrictEqual(ts(1, 2));
+      id = type.prevId(id)!;
+      expect(id).toBe(undefined);
+    });
+  });
+
   describe('export / import', () => {
     type Entry = [ITimestampStruct, number, string];
     const exp = (type: StrNode) => {