Emma Britnor
Leveraging Storybook for Component Driven Development outside of your classic Component Library.
#1about 2 minutes
Addressing the challenges of scaling large web applications
Large applications often suffer from duplicated work and hard-to-reuse components, which component-driven development helps to solve.
#2about 5 minutes
Best practices for designing flexible and reusable component APIs
Adopt principles like single responsibility, composition, and render props to create modular and maintainable component APIs from the start.
#3about 6 minutes
Getting started with Storybook for isolated component development
Use Storybook to build UI components in isolation, write stories to document different states, and get auto-generated documentation.
#4about 2 minutes
Handling complex components with state and API calls
Replicate complex component behaviors in Storybook by mocking API calls with MSW and managing global state with decorators.
#5about 3 minutes
Integrating user interactions and Figma designs into Storybook
Use the play method to script user interactions within stories and integrate Figma designs directly for better design-to-code consistency.
#6about 2 minutes
Leveraging stories for UI and visual regression testing
Import stories directly into React Testing Library for UI-driven testing and use Chromatic for automated visual regression testing.
#7about 2 minutes
Using Storybook to build and maintain shared libraries
Well-documented components in Storybook make it easier to identify reusable patterns and extract them into a shared component library.
Related jobs
Jobs that call for the skills explored in this talk.
Featured Partners
Related Videos
Building a framework-independent component library
Tobias Scholz
Unlocking Seamless Collaboration: Design-First APIs for UI Components
Lucien Immink
Building a component library for modern challenges
Filip Rakowski
Design Systems and how to develop consistent and scalable products with them
Michael Siregar
Component styling in a JS world — evolve your mental model
Maximilian Heinrich
Extending HTML with Web Components
Rowdy Rabouw
Building Interactive Async UI with React 19 and Ariakit
Aurora Scharff
Frameworkless: How to use Web-Components in production?
Tobias Münch
From learning to earning
Jobs that call for the skills explored in this talk.
Software Architect (Contractor) - Composable Commerce & Event-Driven Design
CobbleWeb
Birmingham, United Kingdom
Remote
€61K
Redis
React
Node.js
+4
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Canton of Montpellier-3, France
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Paris, France
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Canton of Bordeaux-2, France
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Quedlinburg, Germany
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Schwerin, Germany
Remote
REST
Docker
Node.js
JavaScript
+1
Node.js/Playwright Engineer - Testdriver Development
TechBiz Global GmbH
Greifswald, Germany
Remote
REST
Docker
Node.js
JavaScript
+1





