mitosis README

The project's README from github.com/BuilderIO/mitosis. As one markdown file: README.md.



Mitosis logo

Write components once, compile to every framework


code style: prettier PRs Welcome License Types

Overview

Mitosis provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.

Using Mitosis, you can:

PS: We are actively looking for folks interested in becoming contributors to Mitosis. If interested, look at our list of good first issues or reach out on our Discord

Gif example of devloping with Mitosis

Quickstart

To create a new Mitosis project from scratch, run the following create command:

npm create @builder.io/mitosis@latest

Once completed, make sure to read the README.md generated in your new project. It will explain the structure of your project, and provide a walkthrough on how to build/test your components.

Read the full getting started docs for more.

Integration with Figma

To make generating Mitosis components easier, as well as to keep your design system in code in sync with your design system in Figma, Mitosis integrates with Figma.

Learn more about our Figma integration.

Demo of using Mitosis with Figma

Resources

Contribute

Interested in contribute? Head over to the CONTRIBUTING docs and see how you can get setup & started!

Once you're ready, checkout our issues page and grab your first issue!



Made with love by Builder.io

mitosis (BuilderIO/mitosis)

Searching Database…

14.4K ·GitHub
这是什么?Mitosis 是一个编译器,你只需编写一次 UI 组件,就能将其编译为 React、Vue、Angular、Svelte、Solid、Qwik、Alpine 等多种框架的原生代码。
这是运行时库,还是在构建时运行的编译器?它是构建时编译器,而不是运行时库:你用统一的 Mitosis 语法编写组件,它会为每个目标生成对应框架的原生输出代码。
如何开始一个新的 Mitosis 项目?使用官方的 create 命令搭建项目,然后按照生成的 README.md 操作,其中说明了项目结构以及如何构建和测试组件。
使用 CLI 是否需要特定版本的 Node.js?需要。项目的 engines 字段要求 Node.js 16 或更高版本,才能运行 Mitosis CLI 和构建工具。
只写一个共享组件,我会放弃框架特有的功能吗?由于单个 Mitosis 组件必须能正确编译到多种不同的框架,你需要使用受限的、类 JSX 的共享语法来编写,而不能随意使用某个框架的全部功能。
这主要面向需要让设计系统在多个框架之间保持同步的团队吗?是的,Mitosis 面向需要统一组件源头的团队,让设计系统无论在 React、Vue、Angular、Svelte 还是 Solid 应用中使用,都能保持一致。
Mitosis 能和 Figma 设计稿同步组件吗?可以,Mitosis 提供 Figma 集成,有助于从设计稿生成组件,并让 Figma 中的设计系统与代码保持同步。
为什么不直接使用 Web Components?README 中说明,Mitosis 通过编译为各框架的原生代码来避开 Web Components 的问题,而不是依赖共享的自定义元素运行时。
能把编译后的组件发布到 npm 吗?可以,编译完成后,你可以将生成的各框架输出发布到 npm,让同一套设计系统从同一份源码发布出独立的 React、Vue 或 Svelte 包。
有没有不用安装任何东西就能试用 Mitosis 的方法?有,README 中提供了一个在线 Playground 链接,你可以直接在浏览器中体验 Mitosis 组件。
What are similar projects?shaders, core, blobatar, puck, lucide, storybook, solid, formily
Creator
BuilderIO
Size
31.2 MB
Stars
14.4K
Age
5y
Commits · 90 Days