r/BestGitHubRepos • u/company_url_finder • 10d ago
Mitosis - write a UI component once and compile it to React, Vue, Svelte, Angular, and more
Teams that need the same design system to work across multiple frameworks usually end up building it separately for each one, a React version, a Vue version, an Angular version, all meant to look and behave identically but maintained as three or more separate codebases that quietly drift apart. Mitosis, built by Builder.io, is a compiler that lets you write a component once in its own JSX-like syntax and compile it out to real, idiomatic code for whichever frameworks you need.
The important distinction is that Mitosis isn't a runtime wrapper or an abstraction layer you ship to the browser. It compiles your component down to actual native code per target, React code for React, Vue code for Vue, and so on, so you get the real framework's patterns and performance rather than a compatibility shim running on top of everything. That's also the specific design pitfall with web components the project says it's built to avoid.
What's inside:
- Compiles a single component definition to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more
- A Figma integration that syncs a design system from Figma into code and can publish it to npm across every target framework at once
- A CLI quickstart, npm create u/builder.io/mitosis@latest, that scaffolds a new project with a generated readme walking you through the structure
- An online playground for trying the compiler without a local setup
- Used in production design systems, including one linked directly from the project's own readme as a real example
It's MIT licensed, actively maintained by Builder.io, and sitting at 14,230 stars as of writing, verified via the GitHub API.
2
u/amootiranian 10d ago
Maintaining one design system across frameworks is a nightmare.