Kennt ihr das? Ihr baut eine einzelne Komponente – einen Button, eine Card – und müsst trotzdem die komplette Anwendung starten, euch einloggen und durch mehrere Klicks navigieren, nur um genau den Zustand zu sehen, den ihr testen wollt. Storybook löst genau dieses Problem: Es ist eine eigenständige Entwicklungsumgebung, in der ihr UI-Komponenten isoliert baut, dokumentiert und in allen Zuständen sichtbar macht – ohne die eigentliche App zu starten.
Im KI-Zeitalter wird Storybook sogar noch relevanter: KI-Tools wie GitHub Copilot oder Claude können Komponenten in Sekunden generieren – aber wie überprüft ihr, ob alle Zustände korrekt sind? Genau dafür ist Storybook da. In diesem Workshop lernt ihr deshalb nicht nur das Tool, sondern auch, wie ihr es sinnvoll mit KI-gestützter Entwicklung kombiniert.
Nach diesem Workshop könnt ihr:
Dieser Workshop richtet sich an Studierende, die UI-Komponenten strukturierter entwickeln, dokumentieren und testen möchten. Vorkenntnisse in einem konkreten Framework sind hilfreich, aber nicht zwingend – die Konzepte sind bewusst frameworkübergreifend angelegt, und die Codebasis ist absichtlich einfach gehalten, damit niemand verloren geht.
<button> ist
und wie CSS-Klassen funktionierenBitte vor dem Workshop vorbereiten:
node -vnpm install ausgeführt → Link s. u.Hinweis zum Versionsstand: Der Workshop nutzt Storybook 10 (aktuell 10.4.x) mit dem HTML-Renderer und Vite als Builder – ohne zusätzliche Frameworks. Die gezeigten Konzepte (Stories, Controls, ArgTypes) sind identisch in React, Vue und Angular anwendbar.