无需繁琐工作,构建 UI

Storybook 是一个前端工作台,用于隔离构建 UI 组件和页面。成千上万的团队使用它进行 UI 开发、测试和文档编写。它是开源且免费的。

开始使用
v8
最新版本
30.2m
每月安装量
2282
贡献者
开发
localhost:6006
VSCodeGithubAirbnbMozilla

开发持久耐用的用户界面

Storybook 提供了一个工作台,用于隔离构建 UI。它可以帮助您开发难以触及的状态和极端情况,而无需运行整个应用程序。

隔离构建 UI 组件和页面

实现组件和页面,无需纠结于数据、API 或业务逻辑。

为什么要隔离构建 UI?

将难以触及的极端情况模拟为故事

在应用程序中难以重现的关键状态下渲染组件。然后将这些状态保存为故事,以便在开发、测试和 QA 期间重新访问。

如何编写故事

通过插件增强您的工作流程

插件扩展和自定义您的 UI 开发工作流程。有数百个插件可以帮助您更快地构建 UI、记录组件库以及与其他工具集成。

将完成的 UI 组件拖放到您的应用程序中

完成隔离开发 UI 组件后,将它们拖放到您的应用程序中。您将确信这些组件经过强化,可以支持每种可能的极端情况。

与您已使用的工具集成

Storybook 是可逐步采用的,并与行业标准工具集成。这意味着您的团队不必改变他们的工作流程。

浏览集成
400+
集成
35M
每周下载量
ViteChromatic
Notion
TestingLib
Emotion
Tailwind
Jest
Nextjs
Webpack
Figma
ZeroheightNx
Apollo
Playwright
Axe
RedwoodJS
MSW
Zeplin
GraphQL
Gatsby
Launchdarkly
Sass
SWC
UXpinIonic
Sketch
Invision
Supernova
Cypress
Nuxt
“Storybook 是一个强大的前端工作台环境工具,它允许团队设计、构建和组织 UI 组件(甚至全屏!),而不会被业务逻辑和管道工程所困扰。”
Brad Frost
Brad Frost
《原子设计》作者

以更少的努力和无故障的方式测试 UI

故事捕获了 UI 组件的“已知良好”状态。它们是跟踪 UI 极端情况的一种实用且可重现的方式。重用故事来支持自动化测试

“我们用于编辑 UI 的工具是 Storybook。它是确保您的工作在不同断点上与设计像素对齐的完美场所。”
Adam Neary
Adam Neary
技术主管

记录 UI 以供您的团队重用

Storybook 将 UI、示例和文档集中在一个位置。这有助于您的团队采用现有的 UI 模式。

“Storybook 通过允许我们在设计系统中轻松包含技术文档,使组件开发更加简化!”
Taurie Davis
Taurie Davis
《构建设计系统》作者

分享 UI 的实际工作方式

故事展示了 UI 的实际工作方式,而不仅仅是它们应该如何工作的静态设计。这使每个人都与当前生产环境中的内容保持一致。

发布 Storybook 以获得团队成员的认可

将 Storybook 发布为网站,供利益相关者参考。你的团队无需编写代码即可检查 UI 是否正确。

发布 Storybook
Storybook Mock UI
Player
Player
Player
Player

将 stories 嵌入到 wikis、Markdown 和 Figma 中

嵌入 stories 以向队友和开发者社区展示你的工作。支持 oEmbed 标准。

嵌入 stories
Embed stories using iframes in your NextJS sites
还有更多

导入 将 stories 导入到其他 JavaScript 工具中

Stories 是基于 ES6 模块的可移植标准。编写一次 stories,即可将其导入任何 JavaScript 库。

在测试和库中重用 stories
UserCard.test.js
import React from 'react';
import { render, unmountComponentAtNode } from 'react-dom';
import { act } from 'react-dom/test-utils';
import { composeStories } from '@storybook/testing-react';
import * as stories from './UserCard.stories';

// Compile the "MissingProfileImage" story
const { MissingProfileImage } = composeStories(stories);

let container = null;
beforeEach(() => {
  container = document.createElement('div');
  document.body.appendChild(container);
});

afterEach(() => {
  unmountComponentAtNode(container);
  container.remove();
  container = null;
});

it('renders a fallback profile image', () => {
  // Render the story
  act(() => {
    render(<MissingProfileImage />, container);
  });

  // Verify the DOM structure
  expect(container.querySelector('img').getAttribute('src'))
    .toEqual(
      '/images/user-fallback.png'
    );
});
还有更多
“在开始构建新的设计系统时,Storybook 是我的首选。它使设计和工程团队都能快速轻松地完成部署。”
Sarrah Vesselov
Sarrah Vesselov
《构建设计系统》作者
logo-cloudbees - Storybook 中文

自动化 UI 工作流程

将 Storybook 添加为 CI 步骤,以自动化 UI 开发工作流程。这有助于你和你的团队更快地交付产品,并减少手动工作。

发布 Storybook
在线发布 Storybook,以便与开发者、设计师和产品经理 (PM) 协作进行 UI 实现。你的队友无需启动开发环境即可查看工作成果。
为你的团队发布 Storybook
UI 测试
在 CI 中测试 UI 的各个方面:视觉、功能、可访问性和快照,以检测组件级别的 UI 错误。
自动检测 UI 错误
UI 评审
请求队友的反馈以验证 UI 实现。共同讨论 UI 更改,然后分配评审人员进行批准。
与你的团队一起评审
Comment from a userComment from a userComment from a user
合并并发布
UI 开发生命周期的每个阶段都通过 pull request 检查进行跟踪。通过所有检查以确保你的工作已准备好投入生产。
与 Git 版本控制集成
所有 CI 检查已通过!
正在运行组件的 CI 检查
Storybook 发布 - 准备好分享!
Storybook 发布 - 正在发布 UI…
UI 测试 - 2 个更改已接受为基线
UI 测试 - 正在运行测试…
UI 评审 - 3 个讨论已解决
UI 评审 - 等待评审人员…

为前端开发者打造

顶尖的前端工程团队依靠 Storybook 来交付改变世界的产品。加入我们的开源社区,学习新技术并获得支持。

加入 2282 位贡献者,一起构建 UI 开发的未来。
在 Github 上点赞
2282
贡献者
与 19,879+ 位前端开发者交流。
加入 Discord 服务器
19,879+
服务器成员
从 Storybook 维护者处获取最新消息和更新。
在 X 上关注
24,200+
关注者
观看教程、功能预览和访谈。
在 YouTube 上观看
7,020+
订阅者