storybookjs/storybook
6 articles
Prerequisites
- ›General web development knowledge (HTML, CSS, JavaScript)
- ›Basic understanding of Node.js and npm/yarn
- ›Familiarity with monorepo concepts
- ›Understanding of iframes and cross-frame communication
Storybook's Architecture: A Three-World System Connected by Channels
How Storybook runs as three distinct environments — Server, Manager, and Preview — unified into a single package with 40 subpath exports.
The Preset System: How Storybook Composes Configuration from Dozens of Sources
A deep dive into Storybook's preset architecture — the composable reduce chain that merges settings from defaults, frameworks, builders, addons, and user overrides.
Channels and Events: The Communication Protocol That Holds Storybook Together
How Storybook's three environments communicate via a Channel abstraction with 100+ events, PostMessage and WebSocket transports, and the Universal Store for state synchronization.
The Preview Rendering Pipeline: From CSF Files to Rendered Stories
Tracing the complete Preview rendering pipeline: virtual module bootstrap, StoryStore processing, config composition, the StoryRender lifecycle with its render phases, and framework renderer integration.
The Manager UI: Modular State Management and Addon Integration
How Storybook's Manager UI composes 14 state modules into a unified store, registers addons into typed slots, and supports Storybook composition via refs.
Build Infrastructure, Testing, and the Developer Workflow
The Nx-orchestrated monorepo build pipeline, story index generation, change detection, sandbox testing system, and structured error handling in Storybook.