轻松构建 UI

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

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

开发耐用的用户界面

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

独立构建 UI 组件和页面

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

为什么要独立构建 UI?

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

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

如何编写故事

使用插件增强您的工作流程

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

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

在独立开发 UI 组件后,将它们放入您的应用程序中。您将确信这些组件经过强化,可以支持所有可能的边缘情况。

与您已在使用的工具集成

Storybook 可以逐步采用,并与行业标准工具集成。这意味着您的团队无需更改其工作流程。

浏览集成
400+
集成
3500 万
每周下载量
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

将故事嵌入 Wiki、Markdown 和 Figma 中

嵌入故事以向团队成员和开发者社区展示您的工作。与 oEmbed 标准兼容。

嵌入故事
Embed stories using iframes in your NextJS sites
+ 以及更多

导入 将故事导入其他 JavaScript 工具

故事是基于 ES6 模块的可移植标准。编写一次故事,然后将其导入任何 JavaScript 库。

在测试和库中重复使用故事
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

自动化 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,874+ 位前端开发者交流。
加入 Discord 服务器
19,874+
服务器成员
获取 Storybook 维护者的最新消息和更新。
关注 X(推特)
24,200+
关注者
观看教程、功能预览和访谈。
在 YouTube 上观看
7,020+
订阅者