省去繁重工作,构建 UI

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

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

开发可靠的用户界面

Storybook 提供一个工作坊,用于独立构建 UI。它可以帮助您开发难以触及的状态和边缘情况,而无需运行整个应用程序。

独立构建 UI 组件和页面

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

为什么独立构建 UI?

将难以触及的边缘情况模拟为 stories

在应用程序中难以重现的关键状态下渲染组件。然后将这些状态保存为 stories,以便在开发、测试和质量保证阶段重新查看。

如何编写 story

使用插件提升您的工作流程

插件扩展和自定义您的 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

Stories 捕获 UI 组件的“已知良好”状态。它们是一种实用且可重现的方式,用于记录 UI 边缘情况。重用 stories 以支持自动化测试

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

编写 UI 文档,供您的团队重用

Storybook 将 UI、示例和文档整合到一处。这有助于您的团队采用现有的 UI 模式。

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

分享 UI 的实际工作方式

Stories 展示了 UI 的实际工作方式,而不仅仅是它们应该如何工作的静态设计。这有助于所有人对当前生产环境中的内容保持一致。

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

将 Storybook 发布为一个网站,供利益相关者参考。您的团队可以检查 UI 是否正确,而无需修改代码。

发布 Storybook
Storybook Mock UI
Player
Player
Player
Player

在 Wiki、Markdown 和 Figma 中嵌入 stories

嵌入 stories 以向团队成员和开发者社区展示您的工作。支持 oEmbed 标准。

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

import 将 stories 导入其他 JavaScript 工具中

Stories 是基于 ES6 modules 的可移植标准。编写 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,以便与开发人员、设计师和产品经理协作进行 UI 实现。您的团队成员可以看到工作成果,而无需启动开发环境。
为您的团队发布 Storybook
UI 测试
在 CI 中测试 UI 的各个方面:可视化、功能、无障碍和快照,以检测细致到组件级别的 UI 错误。
自动检测 UI 错误
UI 评审
请求团队成员提供反馈以验证 UI 实现。一起讨论 UI 变更,然后指定评审人进行批准。
与您的团队一起评审
Comment from a userComment from a userComment from a user
合并并发布
UI 开发生命周期的每个阶段都由拉取请求检查跟踪。通过所有检查以确定您的工作已准备好投入生产环境。
与 Git 版本控制集成
所有 CI 检查均已通过!
正在对组件运行 CI 检查
Storybook 发布 - 准备好分享了!
Storybook 发布 - 正在发布 UI…
UI 测试 - 2 个变更被接受为基线
UI 测试 - 正在运行测试…
UI 评审 - 3 个讨论已解决
UI 评审 - 等待评审人…

专为前端开发人员打造

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

加入 2282 位贡献者,共同构建 UI 开发的未来。
在 Github 上标星
2282
贡献者
与 19,833+ 位前端开发人员聊天。
加入 Discord 服务器
19,833+
服务器成员
获取来自 Storybook 维护者的最新新闻和更新。
在 X 上关注
24,200+
关注者
观看教程、功能预览和采访。
在 YouTube 上观看
7,020+
订阅者