Was ist Storybook?
Wie sieht dein Kontaktformular aus, wenn jemand ein Pflichtfeld vergisst? Und auf dem Handy, mit langem Namen und Fehlermeldung? Genau solche Fragen klärt Storybook. Es ist ein Werkzeug, in dem Entwickler jeden Baustein einer Oberfläche einzeln ansehen, ohne die ganze Website zu starten.
Die Macher nennen Storybook eine „Werkstatt“ für Oberflächen-Bausteine, die isoliert gebaut werden. Die offizielle Doku nennt drei Zwecke: entwickeln, testen und dokumentieren. Storybook ist Open Source, steht unter der MIT-Lizenz und kostet nichts.
Aus allen Stories zusammen entsteht ein Katalog. Darin sieht jeder, was es schon gibt. Das Design-Team prüft, ob die Bausteine zur Marke passen. Die Entwicklung baut nichts doppelt. Und das Marketing weiß, welche Teaser und Boxen es für die nächste Landingpage gibt.
So arbeitet Storybook
Storybook läuft neben dem eigentlichen Projekt im Browser. Links steht die Liste der Bausteine, in der Mitte der gerade gewählte Zustand. Über Regler änderst du Texte, Farben oder Größen live. Weitere Erweiterungen, die „Addons“, zeigen etwa verschiedene Bildschirmbreiten.
Aufgabe
Was Storybook dafür bietet
Entwickeln
Baustein einzeln bauen, ohne Login oder Testdaten
Testen
Klick-Tests, Barrierefreiheit, Bildvergleich
Dokumentieren
Automatische Doku-Seite je Baustein
Abstimmen
Link zum Katalog für Design und Kunde
Mit Version 9 vom Juni 2025 kamen Tests mit Vitest und Barrierefreiheits-Prüfungen mit axe-core gegen die WCAG dazu. Storybook 10 folgte im Oktober 2025, die Installation ist laut Anbieter 29 % kleiner als bei Version 9. Offiziell unterstützt werden unter anderem React, Next.js, Vue, Angular, Svelte und Web Components.
Wie verbreitet das Werkzeug ist, zeigt die npm-Statistik: In der Woche vom 2. bis 8. November 2026 wurde das Paket rund 35 Millionen Mal heruntergeladen. Das sind Downloads, keine Nutzer, auch automatische Builds zählen mit.
Storybook, Figma, Styleguide: Wo ist der Unterschied?
Die drei werden ständig verwechselt. Dabei haben sie klar getrennte Aufgaben:
- Figma zeigt Entwürfe. Das sind Bilder davon, wie etwas aussehen soll.
- Storybook zeigt echten, laufenden Code. Was du dort siehst, kommt so auf die Website.
- Styleguide beschreibt Regeln: Farben, Schriften, Abstände, Tonfall. Meist als PDF oder eigene Seite.
- Design-System ist das Ganze: Regeln, Bausteine und Doku. Storybook ist oft sein Schaufenster.
Laut Doku lassen sich Stories in Figma einbetten. So sehen Designer im Entwurf, wie der fertige Baustein wirklich aussieht. Im offiziellen Showcase stehen große Design-Systeme wie IBM Carbon, Shopify Polaris oder Microsofts Fluent UI.
Häufige Fehler
Fehler 1 · Storybook für reine Doku halten
Wer nur hübsche Katalogseiten will, verschenkt die Hälfte. Der eigentliche Wert liegt in den Tests: Ändert jemand den Button, sieht man sofort, welche Stories anders aussehen.
Fehler 2 · Die Kosten ganz ausblenden
Storybook selbst ist kostenlos. Bildvergleiche im großen Stil laufen aber meist über Chromatic, den Dienst der Storybook-Macher. Der Gratis-Plan reicht für 5.000 Schnappschüsse im Monat, der kleinste bezahlte Plan kostet 179 $ im Monat (Stand November 2026).
Fehler 3 · Stories anlegen und dann vergessen
Ein Katalog, der nicht mehr zur Website passt, ist schlimmer als keiner. Er gaukelt Ordnung vor. Neue Bausteine bekommen deshalb ihre Story gleich mit, sonst veraltet der Katalog in wenigen Monaten.
Lohnt sich Storybook für dich?
Hast du eine eigene App oder ein Frontend mit React, Vue oder Angular, dann ja. Spätestens wenn mehrere Leute an denselben Bausteinen arbeiten, spart der Katalog viele Rückfragen.
Für eine klassische WordPress-Seite mit Elementor ist Storybook meist zu groß. Dort übernehmen globale Farben, Schriften und gespeicherte Vorlagen im Page-Builder die Rolle des Katalogs. Ein sauberer Styleguide reicht dann völlig.
Häufige Fragen
Ist Storybook kostenlos?
Ja, Storybook ist Open Source und steht unter der MIT-Lizenz. Kosten entstehen erst, wenn du Zusatzdienste wie Chromatic für visuelle Tests im großen Umfang nutzt.
Was ist der Unterschied zwischen Storybook und Figma?
Figma zeigt Entwürfe, Storybook zeigt echten, laufenden Code. Beide lassen sich verbinden: Stories können in Figma eingebettet werden, damit Design und Entwicklung auf denselben Stand schauen.
Funktioniert Storybook mit WordPress?
Storybook ist für Code-Frontends gebaut, etwa mit React, Vue, Angular oder Web Components. Für eine WordPress-Seite mit Page-Builder ist es meist zu aufwendig, dort reichen globale Stile und Vorlagen.
Was ist eine Story in Storybook?
Eine Story zeigt einen Baustein in einem bestimmten Zustand, zum Beispiel einen Button deaktiviert oder mit Fehlermeldung. Ein Baustein hat meist mehrere Stories.
Brauche ich als kleines Unternehmen Storybook?
Meist nicht. Storybook lohnt sich, wenn ihr eine eigene App oder ein eigenes Frontend entwickelt. Für eine Firmenwebsite reicht ein sauberer Styleguide mit klaren Regeln für Farben, Schriften und Bausteine.
