Storybook

Composants UI rendus hors de l'application, état par état

Storybook est un atelier frontend : il affiche les composants UI, et des pages entières, hors de l'application qui les utilise. Chaque état d'un composant tient dans une story, qui fixe ses props et le contexte nécessaire au rendu : le formulaire de connexion vide et le même formulaire rempli font deux stories, ouvertes directement dans l'interface de Storybook.

Documentation et tests tirés des mêmes stories

• Le dépôt principal prend en charge React, Angular, Vue 3, Svelte, Preact, Web Components, HTML et Ember. React Native, Qwik, SolidJS, Android, iOS et Flutter passent par des projets séparés.
• Autodocs génère la page de documentation d'un composant dès qu'une de ses stories porte le tag autodocs, à partir de ses args, argTypes et parameters.
• Les tests d'interaction s'écrivent dans la story : sa fonction play clique, saisit ou soumet un formulaire, puis vérifie le résultat avec les requêtes de Testing Library.
• L'addon d'accessibilité repose sur axe-core, de Deque, qui repère selon son éditeur jusqu'à 57 % des problèmes WCAG. Il ajoute un panneau des violations et un bouton qui simule des troubles de la vision.
• Le build de production est une application web statique, que n'importe quel serveur web peut servir. Designers et chefs de produit y vérifient l'interface sans environnement de développement.
• Un addon MCP, en preview, donne à un agent IA la documentation des composants, la génération de stories et les tests. La partie documentation ne marche qu'avec les frameworks React, angular-vite et vue3-vite.

Exigences de Storybook 10 et politique de correctifs

Storybook 10 exige Node.js 20.19+ ou 22.12+. Cette version ne publie plus que des paquets ESM, et le fichier .storybook/main.js|ts doit lui-même être de l'ESM valide. L'interface demande au minimum Chrome 131, Firefox 136 ou Safari 18.3 ; pour un navigateur plus ancien, la documentation renvoie à une version antérieure à la 9.0 ou au mode « preview-only ».

Les tests de composants par Vitest supposent un framework Storybook bâti sur Vite. L'addon Vitest demande Vitest 3.0 ou plus et exécute les stories dans le Chromium de Playwright, en mode navigateur. Next.js n'y accède que par le framework @storybook/nextjs-vite, à partir de Next.js 14.1. Un projet resté sur Webpack passe par le test-runner.

Storybook confie ses tests visuels multi-navigateurs à Chromatic. Ce service cloud, édité par l'équipe de Storybook, capture et compare les stories qu'on lui envoie, ce qui exige un compte. L'offre gratuite couvre 5 000 snapshots facturés par mois, sur Chrome seulement. Safari, Firefox et Edge commencent avec l'offre Starter, à 179 dollars par mois.

Une majeure par an environ, et des correctifs graves seulement pour les deux précédentes. La 10.6.4 date du 26 octobre 2026 et la 11.0.0 est en alpha (alpha.8 le 23 octobre). Seule la dernière mineure de la majeure en cours est corrigée, et la 7 ne l'est plus du tout. Le guide de migration conseille pourtant de rester en 8.x si les exigences de la 10 bloquent, une branche qui ne reçoit plus que les failles de sévérité élevée ou critique.

Deux failles du serveur de développement ont été corrigées le 12 octobre 2026. La faille critique (CVE-2026-114125) permet à un site malveillant de modifier des fichiers du projet quand un serveur de dev tourne et qu'il est ouvert dans le navigateur ; un Storybook construit n'est pas concerné. L'autre, de sévérité élevée (CVE-2026-114126), livre le jeton WebSocket du serveur aux machines du réseau local. Les versions 10.6.2, 9.1.21 et 8.6.19 corrigent les deux. En décembre 2025, la faille CVE-2025-68429 pouvait, dans certaines configurations, embarquer les variables d'un fichier .env dans le build publié.