Sidebranch löst ein Alltagsproblem der Frontend-Entwicklung: Wie eine Änderung wirklich aussieht, zeigte sich bisher erst nach einem Branch-Wechsel, der den eigenen Arbeitsstand beiseiteräumt. Das kostenlose Werkzeug des Entwicklers Cris Graña stellt stattdessen zwei Branches nebeneinander, beide live im Browser, ohne einen einzigen Commit anzufassen.

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

Code-Reviews lesen den Diff, nicht das fertige Bild. Gerade bei Oberflächen rutschen so verschobene Abstände, gebrochene Zustände oder ein falscher Fokusrahmen durch, die im Text der Änderung unsichtbar bleiben. Sidebranch setzt genau dort an und stellt die laufende Anwendung zweier Stände direkt gegeneinander.

Das Wichtigste in Kürze

  • Sidebranch legt für jeden Branch ein eigenes Git-Worktree an und startet dessen Entwicklungsserver getrennt, der eigene Arbeitsstand bleibt unberührt.
  • Ein Overlay im Browser schaltet zwischen zwei Ständen um; ein Überblend- und ein Zwiebelschalen-Modus heben jede Verschiebung in der Oberfläche hervor.
  • Das Werkzeug läuft framework-unabhängig und kommt ohne externe Abhängigkeiten aus, laut Anbieter genügt jede Anwendung, die auf einem Port per HTTP antwortet.
  • Installation über die Chrome-Erweiterung und zwei npx-Befehle; der Quellcode liegt offen auf GitHub, Kosten fallen keine an.

Was macht Sidebranch anders?

Zwei silberne quadratische Rahmen nebeneinander mit einem 'DIFF'-Schild unten
Sidebranch nutzt Git-Worktrees um jeden Branch in separaten Verzeichnissen auszuchecken und auf eigenem Port aufzubauen, wodurch paralleles Arbeiten an mehreren Branches ohne Datenverlust möglich wird

Der Kniff steckt in den Git-Worktrees. Statt im selben Verzeichnis den Branch zu wechseln, checkt Sidebranch jeden Branch in ein eigenes Arbeitsverzeichnis aus und baut ihn dort auf einem separaten Port.[1] Wählen Sie im Browser einen zweiten Branch, läuft dieser parallel zum ersten, und der Editor mit den offenen, ungespeicherten Dateien bleibt, wie er war.

Beim Vergleich beider Stände hilft der Zwiebelschalen-Modus, der die zweite Ansicht halbtransparent über die erste legt und jede Abweichung sichtbar macht. Laut Anbieter unterstützt das Werkzeug unter anderem Next, Vite, Django und Rails, solange die Anwendung auf einem Port antwortet. Der Quellcode steht offen auf GitHub, gepflegt von einem einzelnen Entwickler.[2]

Was unterscheidet Sidebranch von Chromatic?

Visuelle Prüfung lief bisher vor allem in der Pipeline. Chromatic etwa fotografiert einzelne Komponenten aus Storybook und vergleicht sie im Aufbauprozess gegen einen Referenzstand; der Einstiegstarif liegt bei 179 US-Dollar im Monat.[3] Sidebranch geht den umgekehrten Weg: keine Komponenten-Schnappschüsse, sondern die ganze Anwendung, lokal und in Echtzeit, kostenlos.

Der Preis dafür ist der Zuschnitt. Sidebranch prüft nichts automatisch und protokolliert kein Ergebnis fürs Team, sondern hilft einer Person beim Hinsehen. Für die dokumentierte Regressionsprüfung bleibt der Dienst in der Pipeline nötig, für den schnellen Blick vor dem Merge genügt das freie Werkzeug.

Sidebranch: visuelles Branch-Diffing in Zahlen
Was das kostenlose Werkzeug beim Prüfen von Oberflächen leistet
2
Branches laufen gleichzeitig, jeder in einem eigenen Git-Worktree
3
Vergleichsmodi: zwei Fenster, Überblenden und Zwiebelschale
0
externe Abhängigkeiten, nur Node-Bordmittel
0 €
Kosten; der Einstieg bei Chromatic liegt bei 179 US-Dollar im Monat
Werkzeug, kein Wächter

Sidebranch prüft manuell und lokal. Die automatische Regressionsprüfung fürs ganze Team bleibt Sache der Pipeline, etwa mit Chromatic oder Percy.

Quelle: sidebranch.dev, GitHub (cristobalwee/sidebranch), Chromatic Pricing

© 2026 Dr. Web | Das Fachportal für Entscheider | Infografik von Dr. Web

Je mehr Oberfläche eine KI in Sekunden hinwirft, desto teurer wird das Hinsehen. Ein Werkzeug, das zwei Stände nebeneinander laufen lässt, verlagert die Kontrolle vom Diff zurück aufs fertige Bild.

— Michael Dobler, Herausgeber Dr. Web

Warum das gerade jetzt zählt

Der Zeitpunkt passt zur Lage in vielen Teams. KI-Assistenten erzeugen Oberflächen im Minutentakt, und die Prüfung wird zum Engpass, nicht das Schreiben. Dr. Web hat bereits beschrieben, dass KI-Code billig erzeugt und teuer im Unterhalt ist; das visuelle Nachprüfen jeder generierten Änderung gehört zu genau diesem Unterhalt.

Für Freelancer und kleine Agenturen im DACH-Raum ist die Hürde niedrig, weil weder Konto noch Abo nötig sind. Beim Abnehmen fremder Pull Requests entfallen das Wechseln und das Zwischenspeichern. Ein Blick lohnt sich auch neben Bausteinsammlungen wie Bencho oder den Open-Source-React-Komponenten, die fertige Oberfläche liefern, während Sidebranch das Ergebnis kontrolliert.

Ein risikoloser Test steht schnell: die Erweiterung installieren, in einem laufenden Projekt npx sidebranch init ausführen und den nächsten Review-Branch neben dem Hauptzweig öffnen. Bleibt die Oberfläche stabil, kostet der Blick nur Sekunden; kippt ein Detail, springt der Fehler sofort ins Auge.

Quellen

[1] Sidebranch: „Sidebranch — worktree visual diffing“

[2] GitHub: „cristobalwee/sidebranch: Local visual diffing with git worktrees“

[3] Chromatic: „Chromatic Pricing“

Mehr Newshunger?

4,4 19 Bewertungen

Wie hat Ihnen dieser Artikel gefallen?

Artikel teilen
X LinkedIn Facebook XING WhatsApp E-Mail