Emma Britnor

Leveraging Storybook for Component Driven Development outside of your classic Component Library.

How can you combine visual documentation, interaction simulation, and unit testing all in the same file? Learn how to unify your component workflow with Storybook.

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.

Matching moments

Documenting your component library with Storybook
04:35 MIN

Documenting your component library with Storybook

Typescript, React and Atomic Design - a match made in heaven

Using Storybook to document and refactor components
03:08 MIN

Using Storybook to document and refactor components

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Documenting components with a live Storybook demo
07:33 MIN

Documenting components with a live Storybook demo

Design Systems and how to develop consistent and scalable products with them

Documenting components effectively with Storybook
01:53 MIN

Documenting components effectively with Storybook

Building a framework-independent component library

Using a single component library for design and code
07:16 MIN

Using a single component library for design and code

Breaking Down Silos Between Design and Development

Applying the library to accelerate product development
01:53 MIN

Applying the library to accelerate product development

Bridging the Gap

Best practices for documenting a design system
03:31 MIN

Best practices for documenting a design system

Microfrontends at Scale

Scaling development by reusing common components
01:47 MIN

Scaling development by reusing common components

Generate Customer Journeys from reusable Building Blocks

Featured Partners

Related Videos

See all videos
Building a framework-independent component library
19:46

Building a framework-independent component library

Tobias Scholz

Unlocking Seamless Collaboration: Design-First APIs for UI Components
28:35

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Building a component library for modern challenges
29:44

Building a component library for modern challenges

Filip Rakowski

Component styling in a JS world — evolve your mental model
41:28

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Design Systems and how to develop consistent and scalable products with them
32:21

Design Systems and how to develop consistent and scalable products with them

Michael Siregar

Extending HTML with Web Components
41:54

Extending HTML with Web Components

Rowdy Rabouw

Interface Contracts in Microfrontend Architectures
54:39

Interface Contracts in Microfrontend Architectures

Alexander Günsche

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned
28:13

Building a large, complex product from the ground up with typescript & Atomic Design:lessons learned

Nathalia Rus

Related Articles

View all articles
Christina Schaireiter
Why Attend a Developer Event?
Modern software engineering moves too fast for documentation alone. Attending a world-class event is about shifting from tactical execution to strategic leadership. Skill Diversification: Break out of your specific tech stack to see how the industry...
Why Attend a Developer Event?
Daniel Cranney, Chris Heilmann
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML
Inside last week’s Dev Digest 215 . 🗿 Make AI talk like a caveman 🧠 A guide to context engineering for LLMs 🤖 Simon Willison on agentic engineering 🔐 Axios supply chain attack post mortem 🛡️ Designing AI agents to resist prompt injection 🎨 HTML in c...
Dev Digest 215: Agent Memory, JS2026, Googlebot Analysis & Canvas❤️HTML

From learning to earning

Jobs that call for the skills explored in this talk.

React.js/C# Developer

React.js/C# Developer

Inspiration Global
Chesterfield, United States of America

Remote
Senior
Go
API
REST
Azure
+18