Storybook

Dieser Testbericht zu Storybook JS befasst sich mit dem Einsatzzweck des Frontend-Workshops, seinen wichtigsten Funktionen, den Kosten, der Funktionsweise der Tests, seinen Stärken und Schwächen sowie dem Vergleich mit anderen Tools. Storybook läuft parallel zu Ihrer App als separate Entwicklungsumgebung und lässt sich in einen bestehenden Frontend-Workflow integrieren. Man schreibt „Stories“: kleine Dateien, die eine Komponente in einem bestimmten Zustand darstellen, beispielsweise eine deaktivierte Schaltfläche oder ein Formular mit einem Fehler. Storybook sammelt alle Stories in einer Browser-Benutzeroberfläche, sodass Entwickler, Designer und Produktteams jeden Teil der Benutzeroberfläche ansehen, testen und besprechen können, ohne sich durch die eigentliche App klicken zu müssen. Das Projekt ist Open Source und wird von Chromatic gepflegt; Version 10 ist die aktuelle Version (Ankündigung zu Storybook 10).

Wofür wird Storybook verwendet?

Storybook wird für die Entwicklung, das Testen und die Dokumentation der Benutzeroberfläche an einem Ort verwendet. Typische Anwendungsfälle sind:

• Das isolierte Erstellen und Entwickeln von UI-Komponenten als Sandbox für die Entwicklung, einschließlich Randfällen, die in der App schwer zu erreichen sind, wie z. B. leere Zustände, Ladezustände und API-Fehler.
• Betrieb einer Komponentenbibliothek oder eines Designsystems als zentrale Referenz für die Konsistenz der Benutzeroberfläche eines Produkts.
• Visuelle, Interaktions- und Barrierefreiheitstests für jede Story.
• Veröffentlichung eines dynamischen Styleguides, der sowohl von Designern als auch von Entwicklern genutzt wird.
• Überprüfung von UI-Änderungen in Pull-Anfragen, bevor diese in die Produktion gelangen, und Unterstützung der Entwickler beim Debuggen einer Komponente ohne den Rest der App.

Es wird hauptsächlich von Frontend-Entwicklern in React-Projekten verwendet, aber auch mit Vue, Angular, Svelte und Web Components. Teams mit mehr als einer App oder einem gemeinsamen Designsystem profitieren am meisten davon.

Wichtigste Funktionen

• Stories und Isolation: Jede Story rendert eine Komponente in einem Zustand. Mock-Daten, Kontext und API-Anfragen ermöglichen die Entwicklung von Komponenten ohne laufendes Backend, und Hot Module Reloading aktualisiert den Bildschirm beim Speichern.
• Framework-Unterstützung: Offizielle Unterstützung für React (mit Vite, Webpack, Next.js und React Native Web), Preact, Vue, Angular, Svelte und SvelteKit sowie Web Components; Community-Builds fügen Nuxt, SolidJS und weitere Frameworks hinzu.
• Testen: Interaktionstests, bei denen eine Komponente angeklickt wird, Barrierefreiheitstests mit Axe sowie visuelle Tests. Seit Version 9 basiert der Testrunner auf Vitest, und Version 10 bietet zusätzlich automatisches Mocking von Modulen.
• Dokumentation: Automatisch generierte Dokumentationsseiten aus Ihren Stories, mit Props-Tabellen und Markdown-Seiten (MDX), sodass die Dokumentation stets mit dem Code synchron bleibt.
• Add-ons: Ein Ökosystem von Add-ons für Viewports, Themes, Design-Tokens, Figma-Einbettungen und mehr. Jedes Add-on lässt sich mit einem Befehl installieren und erweitert die Storybook-Benutzeroberfläche oder deren Testfunktionen.
• Integration: Importieren Sie vorhandene Komponenten unverändert; Storybook lässt sich in Vite, Webpack, Vitest, Playwright, CI-Pipelines und Design-Tools integrieren, und der Anbieter listet mehr als 400 Integrationen und Add-ons auf, sodass Nutzer selten separate Tools benötigen.
• Veröffentlichung: Erstellen Sie ein statisches Storybook und hosten Sie es auf einer beliebigen Website oder veröffentlichen Sie es mit Chromatic, um es Teams zur Überprüfung zur Verfügung zu stellen.

Preise für Storybook

Storybook selbst ist kostenlos und Open Source unter der MIT-Lizenz (GitHub). Man installiert es mit npm in einem neuen oder bestehenden Projekt, führt es lokal aus (standardmäßig auf Port 6006) und hostet den statischen Build, wo immer man möchte.

Der kostenpflichtige Teil ist optional und stammt von Chromatic, dem gehosteten Dienst des Storybook-Teams. Laut der Chromatic-Preisseite (September 2026):

• Kostenlos: 0 $, 5.000 Snapshots pro Monat, nur Chrome, unbegrenzte Anzahl an Projekten und Mitwirkenden.
• Starter: 179 $ pro Monat, 35.000 Snapshots, zusätzlich Safari, Firefox und Edge.
• Pro: 399 $ pro Monat, 85.000 Snapshots, inklusive eigener Domain.
• Enterprise: individuelle Preisgestaltung, unbegrenzte Anzahl an Snapshots, SSO und Priority-Support.

Die Nutzungsmetrik sind Snapshots: ein Screenshot einer Story in einem Browser. Die Kosten können überraschend hoch ausfallen, da jede Story multipliziert mit jedem Browser und jedem Viewport zählt. Chromatics TurboSnap testet nur die von einer Änderung betroffenen Stories erneut, was den Verbrauch bei großen Komponentenbibliotheken gering hält.

Tests in der UI-Entwicklung: Interaktions-, Barrierefreiheits- und visuelle Tests

Storybook wird ebenso häufig zum Testen wie zur Entwicklung genutzt, und das Testen ist mittlerweile ein wesentlicher Bestandteil des Entwicklungsworkflows. Eine Story ist bereits ein Testfall: Sie rendert eine Komponente in einem bekannten Zustand. Darüber hinaus bietet Storybook drei Arten von Tests. Interaktionstests nutzen eine play Funktion zum Klicken, Eingeben und Überprüfen – ähnlich einem kleinen End-to-End-Test für eine Komponente. Barrierefreiheitstests führen „axe“ für jede Story aus und kennzeichnen Probleme mit Kontrast, Beschriftungen und ARIA. Visuelle Tests vergleichen Screenshots mit der zuletzt freigegebenen Version – lokal oder über Chromatic. Seit Storybook 9 werden diese über Vitest ausgeführt, sodass dieselben Tests in der Storybook-Benutzeroberfläche, über die Befehlszeile und in der CI funktionieren. Das Ergebnis sind Tests für die UI-Entwicklung, die Regressionen aufdecken, bevor sie die Nutzer erreichen – ohne dass für jede Komponente eine separate Testsuite geschrieben werden muss.

Storybook-Benutzeroberfläche für Designsysteme, Dokumentationen und Teams

Storybook ist die Standard-Arbeitsumgebung für viele Designsysteme. Die Komponentenbibliothek liegt im Code vor, und Storybook verwandelt sie in einen durchsuchbaren Katalog mit Dokumentation, Beispielen und den genauen Props, die jede Komponente akzeptiert. Designer können jede Komponente und ihre Funktionalität im Browser erkunden, und Entwickler können ein funktionierendes Beispiel kopieren. Stories lassen sich in Wikis, Markdown-Seiten und Figma einbetten, wodurch die Zusammenarbeit zwischen Design und Entwicklung an einem Ort gebündelt wird. Für Teams liegt der Hauptvorteil in der Konsistenz: Jeder erstellt neue Seiten aus denselben getesteten Bausteinen, und eine Änderung an einer Komponente wird in jeder Story angezeigt, die diese Komponente verwendet.

Wo Storybook glänzt – und wo es Schwächen zeigt

Stärken:

• Kostenlos, Open Source und weit verbreitet, mit einer großen Community und vielen Add-ons.
• Entwicklung von Komponenten isoliert, einschließlich schwer reproduzierbarer Randfälle.
• Entwicklung, Test und Dokumentation erfolgen über dieselben Stories.
• Unterstützt die meisten Frontend-Frameworks sowie sowohl Vite als auch Webpack.

Nachteile:

• Einrichtung und Upgrades sind aufwendig; Hauptversionen wie die reine ESM-Version 10 erfordern Node 20.16 oder neuer.
• Stories sind zusätzlicher Code, den Teams auf dem neuesten Stand halten müssen, da der Katalog sonst von der tatsächlichen App abweicht.
• Bei kleinen Projekten mit wenigen gemeinsam genutzten Komponenten kann der Aufwand den Nutzen überwiegen.
• Für browserübergreifende visuelle Tests in großem Maßstab ist ein kostenpflichtiger Chromatic-Tarif oder eine eigene Infrastruktur erforderlich.

Wie Storybook im Vergleich abschneidet

• Figma: Hier entwerfen Designer die Benutzeroberfläche; in Storybook erstellen und testen Entwickler die programmierte Version, und beide werden über Add-ons und Einbettungen miteinander verbunden.
• Builder.io: Ein visueller Editor, mit dem Nicht-Entwickler Seiten aus Ihren registrierten Komponenten erstellen können, während Storybook ein Entwickler-Tool bleibt.

Es gibt einfachere Open-Source-Tools wie Ladle für React und Histoire für Vue, doch diese verfügen über ein kleineres Add-on-Ökosystem und weniger Testfunktionen.

Lohnt sich Storybook?

Storybook lohnt sich für Frontend-Teams, die eine Komponentenbibliothek, ein Designsystem oder mehr als eine App mit gemeinsamer Benutzeroberfläche pflegen. Es ist kostenlos, erleichtert das Erstellen und Überprüfen von Komponenten und seine Testfunktionen ersetzen einen Großteil des handgeschriebenen Testcodes. Für eine kleine Einzelanwendung mit wenigen wiederverwendbaren Komponenten lohnt es sich weniger, da das Aktualisieren der Stories mehr Zeit kostet, als dadurch eingespart wird. Wenn du Hilfe bei der Einrichtung von Storybook, eines Designsystems oder einer Komponentenbibliothek benötigst, können die Frontend-Entwickler und Agenturen auf LowCodeDevs dies übernehmen.

Quellen

• Storybook: die Anbieter-Website, Funktionen und Projektstatistiken.
• Storybook-Frameworks: Unterstützte Frameworks und Builder.
• Storybook 10: Versionshinweise, Anforderungen an ESM und Node.
• Warum Storybook?: Die Erklärung des Anbieters zur komponentenorientierten Entwicklung.
• Chromatic-Preise: Gehostete Pläne für visuelle Tests und Snapshot-Limits.
• Was ist Storybook, Stackify: Eine Einführung für Entwickler.
• Storybook für Produktteams, UXPin: Wie Design- und Produktteams es nutzen (UXPin vertreibt ein Design-Tool, das sich in Storybook integrieren lässt).