Jeppe Reinhold - Storybook Modernization

Quick Overview

Storybook modernization focused heavily on performance improvements, driven by the shift from Webpack to Vite integration, slimming down the core codebase by aggressively reducing dependencies, and migrating to ESM-only, which enabled new features like deeper integration with meta-frameworks and advanced LLM integration via an MCP server.

Key Points: The primary speed boost in Storybook originated from adopting the Vite integration, which the core team brought in from the community because it was significantly faster than the previous Webpack setup, pushing users toward Vite for performance and future features. The core team grew from three to eight engineers between 2022 and the interview, providing more manpower to focus on technical debt and performance details, leading to substantial slimming of the Storybook Core. The Component Story Format (CSF) evolved from imperative function calls to static exports (CSF 3) to enable static analysis upfront, making story discovery immediate and significantly faster than executing code for thousands of stories. Storybook eliminated massive dependencies, notably Express, which accounted for over half of its dependency graph, and removed legacy compatibility dependencies required for older Node/browser bundling practices. Storybook 10.1 introduced Component Manifests as a key step in LLM integration, exporting component data, usage examples from stories, and JSDoc prop types as a JS file consumed by an MCP server for coding agents. Component Testing, integrated with Vitest, allows users to run interaction tests directly from the Storybook UI, offering a visual debugging platform superior to terminal-based testing where failures are immediately visible in context. Chromatic expanded its offering beyond visual testing to include accessibility regression testing, treating accessibility violations as a baseline to track and decrease over time, achieving a visual burn-down chart for violations.

Context: The podcast episode features an interview between hosts Andrew and Justin and Jeppe Reinhold from the Chromatic team, a core contributor to Storybook. The discussion revisits Storybook's evolution since 2021, focusing on major changes in performance, authoring formats (CSF), testing capabilities (component testing with Vitest), and new directions involving LLM integration via an MCP server.