Undo und Redo im Browser: Wie spart Travels Speicher?

Travels speichert Undo und Redo als Differenz statt als vollständige Kopie

Markus Seyfferth

Autor Dr. Web

23. August 2026

2 Min. Lesezeit

Ein Klick auf Rückgängig kostet in großen Web-Editoren schnell ein Vielfaches an Arbeitsspeicher, weil klassische Verläufe bei jeder Änderung den ganzen Zustand kopieren. Der quelloffene Baustein Travels dreht das Prinzip um und legt nur die Unterschiede ab. Für Agenturen, die Editoren oder Formular-Baukästen entwickeln, ändert das die Rechnung.

drweb.de als bevorzugte Quelle auf Google hinzufügenQualitätsgeprüfte Inhalte direkt in Google News & DiscoverJetzt hinzufügen

Undo und Redo gehört zu den unscheinbaren Funktionen, an denen Nutzer eine Web-Anwendung trotzdem messen. Ein Dokument mit tausend Objekten, dazu hundert Bearbeitungsschritte: schon liegen hundert vollständige Kopien im Speicher. So arbeiten viele Verläufe im Browser. Travels, eine quelloffene Bibliothek für Undo und Redo, speichert stattdessen nur die Differenz zwischen zwei Zuständen.

Das Wichtigste in Kürze

Travels speichert jeden Schritt als JSON-Patch nach RFC 6902, nicht als vollständige Kopie des Zustands.
Der Kern läuft ohne Framework-Bindung, mit React, Vue, Zustand oder reinem JavaScript.
Bei kleinen Zuständen und kurzen Verläufen bleibt der klassische Schnappschuss-Stapel die schnellere Wahl.
Die Lizenz ist MIT, das Projekt trägt über 900 Sterne auf GitHub.

Was ändert Travels für Editoren und Formular-Baukästen?

Ein Stapel Papier (Version 1.0) neben einer Notiz („nur die Änderung“) — Travels bietet Umkehrbarkeit von Aktionen mit den Methoden setState, back, forward, go und reset für bessere Nutzerkontrolle

Die Umkehrbarkeit von Aktionen zählt in der Usability-Lehre von Jakob Nielsen zu den zehn Grundregeln, unter der Überschrift „Nutzerkontrolle und Freiheit“.^[1] Travels liefert genau diesen Baustein als fertigen Kern mit den Methoden setState, back, forward, go und reset. Ein Aufruf von createTravels genügt, um Verlauf, Rückschritt und Vorschritt zu verwalten.

Zum Einsatzbereich zählen Text- und Grafik-Editoren, Formular-Baukästen und Seiten-Builder. Quelloffene Browser-Werkzeuge dieser Art gibt es reichlich, vom Farbgenerator Poline bis zum Live-Editor Play. In allen wächst der Bearbeitungsstand schnell. Jede gespeicherte Kopie schlägt dann auf den Speicher durch.

Warum reicht ein Schnappschuss-Stapel oft nicht?

Der klassische Weg kopiert bei jeder Änderung den gesamten Zustand. Bei einem Dokument von einem Megabyte und hundert Schritten summiert sich das laut Projekt auf rund hundert Megabyte.^[2] Travels legt stattdessen nur den JSON-Patch ab, also die wenigen Bytes, die sich geändert haben.

Möglich macht das die Bibliothek Mutative, auf der Travels aufsetzt. Diese Bibliothek erzeugt aus einfachem Mutations-Code unveränderliche Kopien samt Patch, ein Prinzip, das zuvor Immer mit seiner Funktion produceWithPatches bekannt machte.

Weil ein Patch-Verlauf klein bleibt, lässt er sich in localStorage oder IndexedDB sichern, ohne den Server zu belasten. Der Bearbeitungsstand bleibt damit im Browser des Nutzers.

Undo und Redo klingt nach Detail, entscheidet aber über das Vertrauen in einen Editor. Ein Verlauf aus reinen Differenzen hält selbst lange Sitzungen im Browser leicht und schnell.
— Michael Dobler, Herausgeber Dr. Web

Undo und Redo: Kopie gegen Differenz

Wie Travels den Bearbeitungsverlauf klein hält

Schnappschuss-Stapel

100 MB

Ein Dokument von 1 MB, hundert Bearbeitungsschritte: Der klassische Verlauf kopiert jedes Mal den ganzen Zustand.

Travels-Patches

wenige KB

Travels legt nur die geänderten Felder als JSON-Patch nach RFC 6902 ab, der Verlauf bleibt schlank und lässt sich sichern.

Umgebungen: React, Vue, Zustand, MobX, Pinia, Vanilla JS

MIT

Lizenz ohne Copyleft-Auflagen

900+

Markierungen auf GitHub

Für wen im DACH-Raum lohnt sich der Blick?

Ein Allheilmittel ist Travels nicht. Bei kleinen Zuständen und kurzen Verläufen bleiben Schnappschuss-Lösungen wie Redux-Undo oder Zundo schneller, weil sie sich das Erzeugen der Patches sparen. Gemeinsames Echtzeit-Bearbeiten wiederum verlangt ein CRDT-System, denn Konflikte zwischen mehreren Nutzern löst Travels nicht.

Für Agenturen zählt zusätzlich die Lizenz. Travels steht unter MIT und wandert ohne Copyleft-Auflagen in Kundenprojekte, anders als Bausteine mit einschränkenden Zusätzen.

Der Einstieg bleibt überschaubar. Der Kern liegt als npm-Paket travels bereit, für React gibt es den Hook use-travel, für Zustand die Middleware zustand-travel. Ein Prototyp mit dem eigenen Datenmodell zeigt rasch, ob der Patch-Ansatz die Sitzung wirklich leichter macht.