Skip to content
New
Storybook 7.0🎁 Claim $500 credit to Chromatic with code DAY

Schedule

Times below are shown in your local browser's time zone
 
👋 Welcome to Storybook Day
We’ll kick things off with a short look back at the history and evolution of Storybook and its impact on the front-end ecosystem. We'll examine how Storybook has grown from a tool for isolated component development to one that enables collaboration between developers, designers, and product managers. Even expanding to include UI testing workflows.
Michael Chan
Michael Chan
DX at Chromatic
Dominic Nguyen
Dominic Nguyen
Co-founder at Chromatic
Storybook 7.0
 
🏗️ Foundational changes
Storybook 7.0 is our largest update to date! It has been re-engineered for better performance and reliability, featuring hundreds of enhancements. In this session, Michael will discuss some of the core changes: a design refresh, Component Story Format 3 (CSF3), and improved type safety for stories.
Michael Shilman
Michael Shilman
Product Lead at Storybook
 
⚡ Performance
Starting with 7.0, Storybook will be shipped as a compiled codebase, resulting in reduced install weight and faster start times. Storybook 7.0 also provides first-class support for Vite, offering automatic configuration. Join Ian to learn all about pre-bundling and improvements to the Vite builder.
Ian VanSchooten
Ian VanSchooten
Core Team Member at Storybook
 
📝 Docs revamp
Storybook 7 is here to make your project's UI documentation easier than ever. With MDX 2 support, a new architecture, a streamlined UX, and readymade doc blocks, you can quickly create and maintain your project's documentation.
Tom Coleman
Tom Coleman
CTO at Chromatic
 
🧪 Testing components
Storybook lets you simulate user behavior, such as clicks and inputs, by attaching play functions to stories. Yann will demonstrate how to write such stories and use the Storybook test runner to transform them into executable tests. Also, you'll learn how to uncover untested edge cases with coverage reports.
Yann Braga
Yann Braga
Core Team Member at Storybook
 
🧩 Compatibility
Kyle will cover the new Framework API, which streamlines integrations. This API unlocks zero-config support for more tools, allowing packages to automatically configure Storybook to work with popular application setups like NextJS and SvelteKit.
Kyle Gach
Kyle Gach
DX at Chromatic
 
🚦 Stability
Storybook 7 is our first major update in two years, bringing a lot of changes and new features. To make upgrades easier, we've set up an "early warning system" to test Storybook against a broad matrix of configurations. Michael will explain how the Storybook team use this Ecosystem CI to protect users from package upgrade headaches and ensure a smooth migration.
Michael Shilman
Michael Shilman
Product Lead at Storybook
🥪 Break
🌐 Ecosystem
 
Updates to the Storybook Ecosystem
Storybook has an active ecosystem, with add-ons for styling, state management, testing, accessibility, design tools, project management, and more. Shaun will provide an overview of how we're expanding this ecosystem with recipes. You'll also discover how Storybook has partnered with other tools, such as Nx, Figma, Vite, and Zeplin, to enhance integrations.
Shaun Evening
Shaun Evening
DX at Chromatic
 
Storybook 7 in monorepos with Nx
Monorepos enable you to store multiple packages, such as your app and design system, in a single repository. This makes it easier to work on them simultaneously. Katerina will demonstrate how to use Storybook in monorepos managed with Nx. You'll learn about the Nx-Storybook plugin, which can quickly configure Storybook within a package.
Katerina Skroumpelou
Katerina Skroumpelou
Senior Software Engineer at Nx
💼 Use cases
 
Storybook use cases
Thousands of companies love Storybook. It's used to build design systems, test UIs, publish documentation for open-source libraries, conduct design reviews, and gather feedback from stakeholders, among many other possibilities. Lisa kicks off this segment which looks at how teams utilize Storybook.
Lisa Chinn
Lisa Chinn
Customer Success Lead at Chromatic
 
Who owns this component? ItDepends!
Working out who owns a component, or where a component is used, can be really challenging in a complex design system. At the BBC, many different teams within their Design System Community maintain components, and with so many components, this task can seem almost impossible. In this session, Natalia explains how they solved this by creating ItDepends: an add-on which automatically generates data about component dependencies.
Natalia Zmyslowska
Natalia Zmyslowska
Senior Software Engineer at BBC
 
How Monday.com uses Storybook for UI development
Teams at Monday.com use Storybook to manage monoliths, micro frontends and design systems. Each micro frontend has its own Storybook, which is run through CI/CD checks using Chromatic to help prevent bugs from entering production. In this session, Orr explains how Storybook has enabled Monday.com to accelerate and enhance their UI development process.
Orr Gottlieb
Orr Gottlieb
Vibe Design System Team Lead at Monday.com
 
2x faster feature development with Storybook, mirage and interactions
Intuit builds products used by more than 100 million customers worldwide, such as QuickBooks, TurboTax, Mint, and Mailchimp. The platform is built on a powerful micro frontend architecture that allows teams to rapidly build and ship individual product features. Christopher will show you how they've leveraged Storybook to build whole features in isolation, helping developers fix bugs quickly, simulate hard-to-reproduce scenarios like server errors, and reduce excessive time spent setting up test data.
Chris Webb
Chris Webb
Staff Software Engineer at Intuit (Quickbooks)
 
Conquer Style Bleeding with the CSS Chaos Addon
Have you ever built components that look great on their own but face styling challenges when integrated into consumer applications? This common issue related to style bleeding can lead to time-consuming bug hunting and added development costs. Join Alex to learn about the CSS Chaos Addon, a tool that can improve the defensive styling of your components and enhance the developer experience for those using them in their applications.
Alex Wilson
Alex Wilson
Beacon Design System Engineering Lead at T. Rowe Price
 
Storybook at the Guardian
Join Oliver as he shares how the Guardian uses Storybook and Chromatic across product and engineering. You'll learn how to use Storybook to protect yourself against visual regressions and how to use it as a platform for testing and reviewing changes in collaboration with UX and Design.
Oliver Barnwell
Oliver Barnwell
Software Developer at The Guardian
 
Cultivating a Digital Garden in Storybook
Explore component-driven development and Storybook’s powerful features as we create a lush SVG botanical landscape. You’ll learn how to use the fundamentals of Storybook to express creative coding ideas. Our “Digital Garden” will be composed from the smallest stories (seeds and buds), and combined together to create an animated design system.
Tricia Leach
Tricia Leach
Senior Developer at Work & Co
 
👋 Wrap-up
Michael Chan
Michael Chan
DX at Chromatic