一套免费、MIT 许可的 6200 多个 SVG 图标,提供 React、Vue、Svelte 等多框架组件包。
BuilderIO/mitosis
用一套类 JSX 语法编写组件,编译为 React、Vue、Angular、Svelte、Solid、Qwik 等多种框架代码。
- Star
- 14,445
- Fork
- 679
- 未关闭 Issue
- 177
- 最近提交
- 22天前
这是什么?
Mitosis 是一个编译器,用一套组件代码生成多个前端框架的原生代码。组件使用类 JSX 的格式编写,可编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等目标框架,团队无需为每个框架维护一份独立实现。
它主要适用于需要同时支持多个框架的设计系统,以及将组件分别发布到 npm 的场景。项目还提供 Figma 集成,可将 Figma 中的设计系统组件同步为 Mitosis 代码。与 Web Components 相比,它选择直接编译为各框架的原生代码。
项目提供通过 npm create 快速创建新工程的命令行工具,并附有文档和在线 Playground,便于直接体验编译效果。
核心功能
- 01一份组件源码可编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等框架。
- 02采用类 JSX 的编写格式。
- 03支持与 Figma 集成,将设计系统组件同步为代码。
- 04输出各框架的原生代码,而非 Web Components。
- 05提供在线 Playground 和快速创建项目的工具。
适用场景
- 为使用不同框架的团队维护同一套设计系统。
- 将组件库发布到 npm,并为多个框架分别构建。
- 基于 Figma 设计稿为多种前端技术栈生成组件代码。
快速上手
- 1
使用 create 命令创建新的 Mitosis 项目
npm create @builder.io/mitosis@latest - 2
阅读新项目中生成的 README,了解如何构建和测试组件
使用前须知
- Mitosis 是编译器,生成的代码可能需要针对特定框架手动调整。
标签
常见问题
- mitosis 是什么?
- 用一套类 JSX 语法编写组件,编译为 React、Vue、Angular、Svelte、Solid、Qwik 等多种框架代码。 Mitosis 是一个编译器,用一套组件代码生成多个前端框架的原生代码。组件使用类 JSX 的格式编写,可编译为 React、Vue、Angular、Svelte、Solid、Alpine、Qwik 等目标框架,团队无需为每个框架维护一份独立实现。
- mitosis 可以免费使用吗?用的什么许可证?
- mitosis 以 MIT 许可证开源。用于商业产品前,请先确认许可证条款。
- mitosis 还在维护吗?
- 活跃维护中。mitosis 最近一次提交是在 2026年9月29日。
- mitosis 适合用来做什么?
- 为使用不同框架的团队维护同一套设计系统。 将组件库发布到 npm,并为多个框架分别构建。 基于 Figma 设计稿为多种前端技术栈生成组件代码。
- mitosis 怎么安装和运行?
- 使用 create 命令创建新的 Mitosis 项目: npm create @builder.io/mitosis@latest 阅读新项目中生成的 README,了解如何构建和测试组件
- 在哪里获取 mitosis?
- 源代码和安装说明在 GitHub 上:https://github.com/BuilderIO/mitosis
概要由 AI 根据项目 README 生成;GitHub 数据每日更新。
相关项目
2.2万1245JavaScriptMIT更新于 7小时前
用于独立开发、文档化和测试 UI 组件的前端工作台,支持 React、Vue、Angular 等框架。
9.1万1万TypeScriptMIT更新于 6小时前
基于紧凑流式语言 OpenUI Lang 的生成式 UI 框架,让大模型按你的组件库输出可渲染界面。
1.2万820TypeScriptMIT更新于 前天
Builder.io 可视化开发平台的开源monorepo,包含多框架 SDK、示例与starter项目。
88661169TypeScriptMIT更新于 6天前
用于构建交互式用户界面的 JavaScript 库,基于可组合的组件开发。
25.2万5.2万JavaScriptMIT更新于 10小时前
面向企业应用的 React 组件库与设计语言,适用于构建 Web 应用界面。
10万5.5万TypeScriptMIT更新于 6小时前