将想法在几分钟内转化为图表和代码。

从前端用户流程到后端工作流，使用 Stately 作为您的真理来源，直观地构建和部署任何类型的逻辑。

试用可视化编辑器预约演示
This state machine is called Accumulate room readings. Its purpose is to get temperature and humidity readings from IoT sensors and generate a report every hour. The state machine starts in the ConsumeReadings state, where it initializes the temperature and humidity values as null. It then waits for temperature and humidity events to be logged. When a temperature event is logged, the state machine updates the temperature value. Similarly, when a humidity event is logged, it updates the humidity value. After one hour, the state machine transitions to the GenerateReport state. In this state, it invokes a service called produceReport to generate the report. Once the report is generated, the state machine transitions back to the ConsumeReadings state to continue accumulating readings.
AWSTEDNetflixLyftMicrosoftEpic GamesCisco
想让您的团队入门 XState 或 Stately 吗？无论是咨询会、XState 研讨会，还是定制解决方案，我们都能提供帮助！
联系我们

设计它的工作方式，为团队中的每个人（甚至是 AI 🤖）提供一种视觉语言。

我们的拖放编辑器汇集了各个背景的贡献者。代码、图表、文档、测试生成等都在一个地方。没有更多的孤岛。始终保持最新。

AI 喜欢在每个阶段提供帮助，通过状态机引导它们，而人类则使用可视化编辑器来审核和增强它们的工作。

无需代码即可创建流程。快速原型或收集需求，而无需担心技术细节。

然后模拟你的设计进行测试和迭代。你甚至可以立即尝试作为自动生成的 React 应用程序的原型。

在 Stately 编辑器中模拟模式下查看相同信用检查工作流的视图。在设计模式下，可以添加状态。在模拟模式下，可以逐步查看机器的当前状态和可用事件。

从你的团队和客户那里获得反馈，了解一切应该如何工作。

探索社区图表，以激发你自己的解决方案。与社区分享你的工作，获得反馈和赞誉。

嵌入 Figma 设计或附加图像和其他资产到状态，以查看代码旁边的模型、需求文档等。

嵌入的 Figma 框架与你的设计文件保持同步。

设计师和产品经理可以填写每个状态应该如何显示。

通过每一步的图像直观地理解状态机的作用。

通过使用与你的代码相同逻辑的模型快速原型新想法。

在 Stately 编辑器中为颜色选择器创建的状态机，显示在空闲状态下的颜色值输入截图和在打开状态下的全光谱颜色选择器截图。

使用 AI 生成流程，以搭建行为框架、建议变体、发现边缘情况，甚至编写代码。

在 Stately 编辑器中从文本描述准确生成的状态机：一个用于 Web 应用程序的身份验证流程。前两个登录选项是使用 GitHub 或 Apple，用户无需输入电子邮件地址或密码。第三个登录选项是使用电子邮件，用户需要输入电子邮件地址和密码，如果他们尚未注册则注册，如果已经注册则登录。身份验证流程在用户登录后完成。

使用可执行图表构建 并获得基于文本和可视化工具的最佳效果。

XState

使用 XState 运行图表，这是一个用于在 JavaScript 和 TypeScript 应用中编排和管理状态的一流开源库。无需锁定。

阅读 XState 文档在 Github 上查看
TypeScript, React, Vue

在前端、后端或任何 JavaScript 运行的地方使用 XState。可用于 React、Vue、Svelte 和其他框架的集成。

XState 使用事件驱动编程、状态机、状态图和演员模型来 以可预测、健壮和可视化的方式处理即使是最复杂的逻辑。

了解更多关于状态图的信息
A book lender state machine in VSCode. One panel shows the state machine as a JavaScript object, the other panel shows the same state machine visualized using the XState VSCode extension.

双向更新 在代码和可视化之间进行，让你使用最能提高生产力的工具。

自动可视化 Redux、Zustand 和其他代码 即使没有 XState 也能在你的代码库中获得 Stately 的好处。

一个 IDE 扩展 将 Stately 的强大功能带入 VS Code。

下载 VS Code 扩展

从图表生成 React 应用 以快速启动产品开发。在 AI 的帮助下继续进行可视化迭代，或者直接深入代码，快速扩展脚手架以实现你的愿景。

The room reading state machine visualized in the Stately editor alongside the React app code generated for that app logic. Over the top is a button that says Generate React app.

自动生成测试 以保持覆盖率的健壮和最新。

A test path list of states and events in the Stately editor alongside that path being highlighted on the canvas, and the code generated to implement the tests.

导出所有生成的代码，可以是 Javascript 或 Typescript。

连接到 Github 以同步 Stately 和你的代码库。

检查运行中的应用 使用 Stately Inspector 来帮助测试和调试你的逻辑。

可视化演员之间的通信 在你的运行应用中使用序列图。

The Stately Inspector view, showing a state machine and a sequence diagram for the pizza ordering process side-by-side.

部署到 Stately Sky 以获得即时的实时后端。

想要保持简单吗？ 在我们的可视化编辑器中设计，然后一键部署到我们的多玩家就绪的逻辑即服务 Stately Sky。

使用我们的 SDK 发送事件，我们会自动更新所有客户端。

在 Stately 编辑器中显示的交通灯机器旁边是一个实时 Web 应用程序，显示了交通灯的渲染。

无缝的开发者体验

针对大型云服务进行编码是繁琐的，充满样板代码，并且部署痛苦。
低/无代码平台可能不灵活，并且需要供应商锁定。

使用 Stately Sky，只需绘制一个图表，生成一个 API 密钥，然后点击“部署”。
它还提供可靠的导出选项，无需任何锁定。

一个图表显示了 Stately Studio 如何将一个 actor 部署到 Stately Sky，配置如何从 Stately Sky 发送到 Stately Sky SDK，后者又将状态和事件发送回 Stately Sky。

通过在 Sky 中运行状态机作为 actor，将状态图的表达性和可读性与云计算的持久性和容错性结合起来。

多人协作 可用于白板、文档编辑、游戏或许多其他类型的应用程序。

异步工作流 提高了在没有即时结果的操作中的效率，例如数据处理、邮件发送或 API 调用。

长时间运行的后端进程 如医疗患者入职流程或库存管理。

产品在不断发展。人们都很忙。

理解并保持一致 使用 Stately 作为事实来源。

未来保障你的代码 使用清晰的可视化，便于以后返回和更改。即使是多年以后。

活文档 让整个团队保持同步，无需额外开销。

参考事件目录 自动生成并可注释以提供更多信息。

Stately 编辑器中的订单流程以及显示 OrderCreatedEvent、ShipmentSentEvent 和 OrderConfirmedEvent 事件的事件模式。每个事件都有各种类型的属性，包括字符串、数组、对象和布尔值。

保存版本 作为备份并查看你的工作历史。

导出为 markdown 故事、Mermaid 图或 JSON 文档 可以复制到问题和项目文档中。

生成图表摘要 以快速了解情况。

使用 Stately 构建

Fugo

“我可以使用 Stately 编辑器中的模拟向利益相关者解释业务逻辑。离开编码很长时间后，我可以回来并有效地理解逻辑。”

- Marsel Atniashev

阅读案例研究
Koordinates

“我喜欢 XState 对副作用的一流支持。副作用可以与触发它并使用它的代码共同定位，而不必像 Redux 那样将它们放在其他地方。”

- Taylor Lodge

阅读案例研究

“我能够向公司其他人展示机器可视化器，这是一种乐趣。这有助于传达 UI 部件的复杂性，也有助于讨论如何结合设计模型处理特定用例。”

- Parker McMullin

阅读案例研究
Tidefi

团队的喜爱

    • Amy Pellegrini

      @ Thoughtworks

      每个我引入 XState 的团队在处理复杂用户界面的状态管理时都变得更加高效。它填补了 JS 生态系统中之前没有的一个空白。

    • Natalie Cuthbert

      @ Stitch

      我们一直在为我们的新支付产品使用 XState。向让设计复杂前端流程变得轻松的团队致敬。

    • Patrick Cavit

      @ Netflix

      XState 是一个启示。它使复杂的任务更容易构建和调试，同时也使代码更加简洁和易于理解。

    • Presley Pizzo

      @ Coder

      XState 自然地分离了逻辑，并使模拟 API 调用变得简单，因此更容易测试和组织代码！

    • James Tharpe

      @ T-Mobile

      我们使用 XState 将业务工作流实现为状态图。可视化工具帮助我们与客户更紧密地合作，将工作流外部化为 JSON 配置使得复杂的工作流更改变得出奇地简单，测试用例生成使得前进变得更加自信。XState 让这一切成为可能！

    • Maya Shavin

      @ Microsoft

      XState 的优势：代码流的视觉清晰视图、代码重用性、测试覆盖率、易于调试/发现错误、代码可扩展性和维护性，以及更好的代码设计和规划。

    • Santi Cros

      @ Domestic Data Streamers

      使用 XState 进行思考和构建是我开发健壮业务逻辑的一场革命。但能够实时可视化这一点，在我建模和传达任何逻辑时都是一个游戏规则的改变者！

智能逻辑，从设计到部署的过渡， 再回到设计。

免费注册预约演示