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

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

How a broken frontend culture impacts the web
04:02 MIN

How a broken frontend culture impacts the web

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Building and iterating on an LLM-powered product
05:03 MIN

Building and iterating on an LLM-powered product

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Using personal stories to capture audience attention
03:15 MIN

Using personal stories to capture audience attention

Leveraging Leaders’ Voices: The Business Power of Personal Branding

Featured Partners

Related Videos

See all videos
Building a framework-independent component library19:46

Building a framework-independent component library

Tobias Scholz

Unlocking Seamless Collaboration: Design-First APIs for UI Components28:35

Unlocking Seamless Collaboration: Design-First APIs for UI Components

Lucien Immink

Building a component library for modern challenges29:44

Building a component library for modern challenges

Filip Rakowski

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

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

Michael Siregar

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

Component styling in a JS world — evolve your mental model

Maximilian Heinrich

Extending HTML with Web Components41:54

Extending HTML with Web Components

Rowdy Rabouw

Building Interactive Async UI with React 19 and Ariakit25:22

Building Interactive Async UI with React 19 and Ariakit

Aurora Scharff

Frameworkless: How to use Web-Components in production?46:39

Frameworkless: How to use Web-Components in production?

Tobias Münch

Related Articles

View all articles

From learning to earning

Jobs that call for the skills explored in this talk.