Storybook

In deze recensie van Storybook JS wordt besproken waarvoor de frontend-workshop wordt gebruikt, wat de belangrijkste functies zijn, wat het kost, hoe het testen in zijn werk gaat, waarin het uitblinkt en waar het tekortschiet, en hoe het zich verhoudt tot andere tools. Storybook draait naast je app als een afzonderlijke ontwikkelomgeving en past in een bestaande frontend-workflow. Je schrijft ‘stories’: kleine bestanden die één component in één toestand weergeven, zoals een uitgeschakelde knop of een formulier met een foutmelding. Storybook verzamelt alle stories in een browser-UI, zodat ontwikkelaars, ontwerpers en productteams elk onderdeel van de gebruikersinterface kunnen bekijken, testen en bespreken zonder door de echte app te hoeven klikken. Het project is open source en wordt onderhouden door Chromatic; versie 10 is de huidige release (aankondiging van Storybook 10).

Waarvoor wordt Storybook gebruikt?

Storybook wordt gebruikt voor UI-ontwikkeling, testen en documentatie op één plek. Typische toepassingen zijn:

• Het afzonderlijk maken en bouwen van UI-componenten, als een testomgeving voor ontwikkeling, inclusief randgevallen die moeilijk te bereiken zijn in de app, zoals lege statussen, laadstatussen en API-fouten.
• Het beheren van een componentenbibliotheek of ontwerpsysteem als de enige betrouwbare bron voor de consistentie van de gebruikersinterface van een product.
• Het uitvoeren van visuele, interactie- en toegankelijkheidstests voor elk verhaal.
• Het publiceren van een dynamische stijlgids die zowel door ontwerpers als ontwikkelaars wordt gebruikt.
• Het beoordelen van UI-wijzigingen in pull-verzoeken voordat deze in productie gaan, en het helpen van ontwikkelaars bij het debuggen van een component zonder de rest van de app.

Het wordt vooral gebruikt door frontend-ontwikkelaars bij React-projecten, maar ook bij Vue, Angular, Svelte en Web Components. Teams met meer dan één app, of een gedeeld ontwerpsysteem, halen er het meeste uit.

Belangrijkste functies

• Stories en isolatie: elke story geeft één component in één toestand weer. Met mockgegevens, context en API-verzoeken kun je componenten ontwikkelen zonder een draaiende backend, en dankzij hot module reloading wordt het scherm bijgewerkt zodra je opslaat.
• Ondersteuning voor frameworks: officiële ondersteuning voor React (met Vite, Webpack, Next.js en React Native Web), Preact, Vue, Angular, Svelte en SvelteKit, en Web Components; community-builds voegen Nuxt, SolidJS en andere frameworks toe.
• Testen: interactietests waarbij door een component wordt geklikt, toegankelijkheidstests met axe en visuele tests. Sinds versie 9 is de testrunner gebaseerd op Vitest, en versie 10 voegt module-automocking toe.
• Documentatie: automatische documentatiepagina’s op basis van je stories, met props-tabellen en Markdown (MDX)-pagina’s, zodat de documentatie synchroon blijft met de code.
• Add-ons: een ecosysteem van add-ons voor viewports, thema’s, designtokens, Figma-embeds en meer. Elke add-on is met één commando te installeren en breidt de Storybook-gebruikersinterface of de testmogelijkheden uit.
• Integratie: importeer bestaande componenten zoals ze zijn; Storybook integreert met Vite, Webpack, Vitest, Playwright, CI-pijplijnen en ontwerptools, en de leverancier vermeldt meer dan 400 integraties en add-ons, zodat gebruikers zelden aparte tools nodig hebben.
• Publiceren: bouw een statische Storybook en host deze op elke willekeurige website, of publiceer deze met Chromatic om te delen met teams ter beoordeling.

Prijzen van Storybook

Storybook zelf is gratis en open source onder de MIT-licentie (GitHub). Je installeert het met npm in een nieuw of bestaand project, voert het lokaal uit (standaard op poort 6006) en host de statische build waar je maar wilt.

Het betaalde gedeelte is optioneel en komt van Chromatic, de gehoste dienst van het Storybook-team. Volgens de prijspagina van Chromatic (september 2026):

• Gratis: $0, 5.000 snapshots per maand, alleen Chrome, onbeperkt aantal projecten en medewerkers.
• Starter: $179 per maand, 35.000 snapshots, inclusief Safari, Firefox en Edge.
• Pro: $399 per maand, 85.000 snapshots, inclusief een eigen domein.
• Enterprise: prijs op maat, onbeperkt aantal snapshots, SSO en prioritaire ondersteuning.

De gebruiksmaatstaf is het aantal snapshots: één screenshot van één story in één browser. Het is belangrijk om het aantal snapshots in de gaten te houden, omdat elke story, elke browser en elke viewport meetelt. Chromatic’s TurboSnap test alleen opnieuw de stories die door een wijziging zijn beïnvloed, wat het verbruik bij grote componentbibliotheken laag houdt.

Testen van UI-ontwikkeling: interactie-, toegankelijkheidstests en visuele tests

Storybook wordt net zozeer gebruikt voor testen als voor ontwikkeling, en testen is nu een essentieel onderdeel van de ontwikkelingsworkflow. Een story is op zich al een testcase: het geeft een component weer in een bekende toestand. Daarbovenop voegt Storybook drie soorten tests toe. Interactietests maken gebruik van een play functie om te klikken, te typen en te controleren, als een kleine end-to-end-test voor één component. Toegankelijkheidstests voeren axe uit op elk verhaal en signaleren problemen met contrast, labels en ARIA. Visuele tests vergelijken schermafbeeldingen met de laatst goedgekeurde versie, lokaal of via Chromatic. Sinds Storybook 9 worden deze uitgevoerd via Vitest, zodat dezelfde tests werken in de Storybook-gebruikersinterface, op de opdrachtregel en in CI. Het resultaat is het testen van UI-ontwikkeling waarbij regressies worden opgespoord voordat ze gebruikers bereiken, zonder dat er voor elke component een aparte testsuite hoeft te worden geschreven.

Storybook-gebruikersinterface voor ontwerpsystemen, documentatie en teams

Storybook is de standaardomgeving voor veel ontwerpsystemen. De componentenbibliotheek staat in de code, en Storybook zet deze om in een doorbladerbare catalogus met documentatie, voorbeelden en de exacte props die elke component accepteert. Ontwerpers kunnen elke component en de functionaliteit ervan in de browser verkennen, en ontwikkelaars kunnen een werkend voorbeeld kopiëren. Verhalen kunnen worden ingebed in wiki’s, Markdown-pagina’s en Figma, waardoor de samenwerking tussen ontwerp en code op één plek blijft. Voor teams is het belangrijkste voordeel consistentie: iedereen bouwt nieuwe pagina’s op basis van dezelfde geteste onderdelen, en een wijziging in een component wordt weergegeven in elk verhaal dat deze gebruikt.

Waar Storybook uitblinkt — en waar het tekortschiet

Sterke punten:

• Gratis, open source en wijdverbreid, met een grote community en veel add-ons.
• Ontwikkel componenten afzonderlijk, inclusief randgevallen die moeilijk te reproduceren zijn.
• Ontwikkeling, testen en documentatie vanuit dezelfde stories.
• Ondersteunt de meeste frontend-frameworks en zowel Vite als Webpack.

Nadelen:

• Installatie en upgrades vergen enige inspanning; voor grote versies, zoals de uitsluitend ESM-versie 10, is Node 20.16 of nieuwer vereist.
• Stories zijn extra code die teams up-to-date moeten houden, anders raakt de catalogus uit de pas met de daadwerkelijke app.
• Bij kleine projecten met weinig gedeelde componenten kan de overhead groter zijn dan het voordeel.
• Voor visuele cross-browser-tests op grote schaal is een betaald Chromatic-abonnement of je eigen infrastructuur nodig.

Hoe Storybook zich verhoudt

• Figma: hier ontwerpen ontwerpers de gebruikersinterface; Storybook is waar ontwikkelaars de gecodeerde versie bouwen en testen, en de twee worden met elkaar verbonden via add-ons en inbeddingen.
• Builder.io: een visuele editor waarmee niet-ontwikkelaars pagina’s kunnen bouwen op basis van je geregistreerde componenten, terwijl Storybook een ontwikkelaarstool blijft.

Er bestaan lichtere open-source-tools, zoals Ladle voor React en Histoire voor Vue, maar deze hebben kleinere add-on-ecosystemen en minder testfuncties.

Is Storybook de moeite waard?

Storybook is de moeite waard voor frontend-teams die een componentenbibliotheek, een ontwerpsysteem of meer dan één app met een gedeelde gebruikersinterface onderhouden. Het is gratis, het maakt het bouwen en beoordelen van componenten eenvoudiger, en de testfuncties vervangen veel handgeschreven testcode. Het is minder de moeite waard voor een kleine, afzonderlijke app met weinig herbruikbare componenten, waarbij het bijhouden van stories meer tijd kost dan het bespaart. Als je hulp nodig hebt bij het opzetten van Storybook, een ontwerpsysteem of een componentenbibliotheek, kunnen de frontend-ontwikkelaars en bureaus op LowCodeDevs dit voor je doen.

Bronnen

• Storybook: de website van de aanbieder, functies en projectstatistieken.
• Storybook-frameworks: ondersteunde frameworks en builders.
• Storybook 10: release-opmerkingen, vereisten voor uitsluitend ESM en Node.
• Waarom Storybook?: de uitleg van de leverancier over componentgedreven ontwikkeling.
• Chromatic-prijzen: gehoste visuele testabonnementen en limieten voor snapshots.
• Wat is Storybook, Stackify: een inleiding voor ontwikkelaars.
• Storybook voor productteams, UXPin: hoe ontwerp- en productteams het gebruiken (UXPin verkoopt een ontwerptool die kan worden geïntegreerd met Storybook).