# Jeppe Reinhold - Storybook Modernization Source: https://www.youtube.com/watch?v=BgydLnSwrUg Recap page: https://rapidrecap.app/video/BgydLnSwrUg Generated: 2026-01-05T01:03:02.297+00:00 --- ## 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. ## Detailed Analysis Jeppe Reinhold detailed the significant modernization journey of Storybook, emphasizing performance gains achieved primarily through integrating Vite, which is now the strongly suggested builder, even for non-Vite applications. The core team doubled its engineering power, allowing them to tackle technical debt, resulting in slimming down the codebase by aggressively cutting dependencies, such as removing Express entirely from the dependency tree, and completing the migration to ESM-only in Storybook 10, which also allowed them to unminify their code for better debugging experiences. The evolution of the authoring experience, from imperative story functions to the static Component Story Format (CSF), was crucial for enabling upfront static analysis and subsequent performance gains in loading stories and powering testing tools. Testing has become a first-class feature through integration with Vitest, enabling users to run component and accessibility tests directly within the Storybook UI, which provides visual context superior to terminal runners. Furthermore, the intersection of Storybook and AI is being addressed through the development of an MCP server that consumes Component Manifests—newly exported data containing component definitions, usage examples, and prop types—allowing coding agents like Copilot to reuse existing design system components instead of generating basic UI elements, with future plans to integrate test execution via the MCP server as well. Chromatic, the company funding Storybook, is deeply integrated, enhancing its visual testing with features like Steady Snap to reduce flakiness and Turbo Snap for selective snapshotting based on Git changes, alongside adding accessibility regression tracking. ### Performance Overhaul - Shift to Vite integration as a core experience - Slimming down Storybook Core by cutting dependencies like Express - Completion of ESM-only migration in Storybook 10 to reduce package size ### Component Story Format (CSF) Evolution - Migration from imperative functions to static CSF exports for upfront static analysis - CSF 3 requiring static exports to restrict dynamic writing for better optimization - Introduction of experimental CSF factory functions for improved type safety and hybrid imperative/declarative authoring ### Testing Integration - Component testing built on Vitest allows running interaction tests directly in the UI - Accessibility testing reports violations across all stories, enabling violation tracking via burn-down charts - Chromatic enables visual testing integration within the Storybook experience ### LLM and AI Integration - Building a Storybook MCP server to expose component information to coding agents - Component Manifests export component details, usage examples, and prop types - Agents use this data to reuse existing design system components instead of building from scratch ### Chromatic Product Evolution - Focus on accessibility regression testing, establishing baselines for violations - Steady Snap feature minimizes flakiness in visual testing by taking multiple screenshots - Turbo Snap optimizes CI costs by only snapshotting stories affected by Git changes