StoryBook

Storybook 是一个前端工作坊，用于在隔离环境中构建 UI 组件和页面，让开发者无需运行整个应用即可开发和共享难以触及的状态与边缘情况。

核心能力：Stories 驱动开发

Storybook 的核心是“故事”（Stories），每个故事捕捉组件的一个渲染状态。一个组件可以有多个故事，分别展示不同状态（如默认、悬停、禁用）。通过 Stories，开发者能单独调试组件，覆盖各种边界情况。

• Args: 动态传递组件参数，实时调整故事行为
• Parameters: 为故事设置全局或局部配置（如背景色、视口尺寸）
• Decorators: 包裹组件以添加上下文（如 Provider、主题）
• Play function: 编写交互脚本，模拟用户点击、输入等操作
• Loaders: 在故事渲染前异步加载数据
• Tags: 为故事添加标签，便于组织和筛选

测试与文档：从开发到质量保障

Storybook 将测试和文档融入开发流程。它支持交互测试、可访问性测试、视觉测试和快照测试，并可集成到 CI 流程中。文档方面，提供自动文档（Autodocs）、MDX 编写和 Doc blocks，方便生成组件使用指南。

• 交互测试: 基于 Play function 模拟用户操作并验证结果
• 可访问性测试: 内置 a11y 插件检测无障碍问题
• 视觉测试: 通过 Chromatic 等工具对比截图变化
• 快照测试: 对组件渲染结果进行快照比对
• 自动文档: 分析组件 Props 和 Stories 自动生成文档页
• Doc blocks: 可复用的文档组件（如 ArgTable、Canvas）

生态与集成：多框架、插件与共享

Storybook 支持主流前端框架（React、Vue、Angular、Svelte、Preact 等），并提供丰富的插件生态。通过 Composition 可组合多个 Storybook，通过 Publish 可发布为静态站点，通过 Embed 可嵌入到 Notion、Figma 等工具中。

• 框架支持: 每个框架有专用配置包，自动适配构建和渲染环境
• 核心插件: Actions、Backgrounds、Controls、Viewport、Toolbars 等
• 插件目录: 社区贡献的数百个插件，可按需安装
• Composition: 将多个 Storybook 实例组合成一个统一界面
• Publish: 导出为静态站点，部署到任何托管服务
• Embed: 将 Stories 嵌入到文档、设计稿或博客中

安装与上手

Storybook 可安装到现有项目中，也可从零开始创建。它提供零配置环境，只需一条命令即可启动。

• 安装命令: npm create storybook@latest
• 版本: 最新 v10（2025年），月安装量超 8000 万
• 贡献者: 超过 2282 名
• 中文支持: 有官方中文文档（storybook.org.cn）
• 企业版: 提供额外功能（如视觉测试、权限管理）

常见问题

Q1：Storybook 支持哪些前端框架？

A1：官方支持 Next.js、React（Vite/Webpack）、React Native（Web/设备）、Preact、Vue、Angular、SvelteKit、Svelte、Web Components 等，每个框架有专用配置包。

Q2：Storybook 的测试功能如何与 CI 集成？

A2：Storybook 支持在 CI 中运行交互测试、视觉测试和快照测试。可通过 Play function 编写测试脚本，结合 Chromatic 进行视觉回归检测，或使用 Jest/Cypress 等工具进行快照和端到端测试。

Q3：Storybook 的 Stories 和传统组件文档有什么区别？

A3：Stories 是组件实际渲染状态的代码化描述，每个故事对应一个具体状态（如加载中、空数据）。Storybook 自动从 Stories 生成文档，展示组件在不同参数下的表现，比纯文本文档更直观、可交互。

更多同类工具与网站,可在前端库分类继续挑选。

信息核实于 2026年7月,具体以官网为准。