Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
Alternatives To Mitosis
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Free Programming Books Zh_cn101,737
2 months ago28gpl-3.0
:books: 免费的计算机编程类中文书籍,欢迎投稿
Storybook78,9307,28921,4769 hours ago1,108September 14, 20222,205mitTypeScript
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Ionic Framework49,06719,4848806 hours ago420May 06, 2020479mitTypeScript
A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
2 days ago1,168mitJavaScript
Prettier is an opinionated code formatter.
30 Days Of Javascript36,175
6 hours ago1January 25, 2022250JavaScript
30 days of JavaScript programming challenge is a step-by-step guide to learn JavaScript programming language in 30 days. This challenge may take more than 100 days, please just follow your own pace. These videos may help too:
Sheetjs32,8674,3792,297a month ago170March 24, 2022129apache-2.0JavaScript
📗 SheetJS Spreadsheet Data Toolkit -- New home
Nativescript22,5492,6191,1026 days ago1,908September 28, 2021946mitTypeScript
⚡ Empowering JavaScript with native platform APIs. ✨ Best of all worlds (TypeScript, Swift, Objective C, Kotlin, Java). Use what you love ❤️ Angular, Capacitor, Ionic, React, Solid, Svelte, Vue + SwiftUI, Jetpack Compose, Flutter and you name it compatible.
Handsontable17,88036216911 hours ago87September 22, 2022446otherJavaScript
JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡
Bit16,695646 hours ago819September 24, 2022142otherTypeScript
A tool for composable software development.
Wails16,23331910 hours ago632September 13, 2022170mitGo
Create beautiful applications using Go
Alternatives To Mitosis
Select To Compare

Alternative Project Comparisons

Write components once, compile to every framework:

Try our interactive fiddle

code style: prettier PRs Welcome License Types

PS: We are actively looking for folks interested in becoming contributors to Mitosis. Given its large surface area, there is a ton of room for any engineer to make a large and sustained impact on the project. We invest a ton of time in helping newcomers get onboarded, and teach them how to make changes to the codebase (see the following examples: #847, #372, #734). If interested, look at our list of good first issues or reach out on our Discord

Table of contents

Quick Start Guide


npm install

Setup mitosis.config.js

/** @type {import('').MitosisConfig} */
module.exports = {
  files: 'src/**',
  targets: ['vue3', 'solid', 'svelte', 'react'],

Check our configuration docs for how to setup the Mitosis config file.

Setup TypeScript

// tsconfig.json
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": ""

Install ESLint Rules

Install our ESLint plugin to have highly useful rules that guide you as you build your Mitosis components.

NOTE: We highly recommend you setup all of the ESLint rules, because they will point out some of Mitosis' limitations and avoid confusion.

Create a Component

// src/components/MyComponent.lite.tsx
import { useStore } from '';

type Props = {
  message: string;

export default function MyBasicComponent(props: Props) {
  const state = useStore({
    name: 'Foo',

  return (
      {props.message || 'Hello'} {}! I can run in React, Vue, Solid or Svelte!


npm exec mitosis build

You should now have an output directory with your compiled components in all 4 frameworks!


Here are some helpful resources on trying out Mitosis:

What is Mitosis?

  • this talk by Sami Jaber at React Day Berlin is a great intro to Mitosis. It gives a good overview of the impetus behind Mitosis, and a high-level understanding of its different pieces.

  • The below video is a brief introduction by Steve Sewell. Mitosis Video


Curious about how Mitosis code works under the hood, and how to use it? Learn more in our in-depth docs.

Why use Mitosis?

Mitosis is an incredibly powerful and flexible tool. So far, we have identified 3 broad categories of engineering teams that stand to benefit greatly from it:

Design Systems Maintainers

If you are the maintainer of a design system library that started off in one web framework, then you have felt the tremendous amount of maintenance pain and duplication when creating new versions for subsequent frameworks. Look no further than the popular React library Chakra UI, and how the maintainers have decided to create Zag.js after feeling the pain of maintaining state-logic code across both their React and Vue libraries. While Zag.js focuses on writing framework-agnostic interactions, Mitosis focuses on writing framework-specific components. (PS: We are working on building examples that combine these two together. TBD!)

Teams using multiple web frameworks

If you are part of a team/organization that has multiple frontends built in different frameworks, then you know that coordinating your design system across all of them for a cohesive experience and feel is an absolute nightmare. Mitosis is an excellent tool to eliminate this class of problems, as it allows you to define your designs in your components once and deploy them to all of your separate frontends.

Teams building web SDKs

If your team is building SDKs for a product that integrates directly into a web framework and involves providing components to the end user, then Mitosis is a perfect fit for your team. Our team at has this exact use-case: our new generation of SDKs is built with Mitosis! Our engineers have received glowing praise from our sales team for speed of delivery, and all it took was a switch flip

What about XKCD

XKCD comic about solving too many standards by creating new standards just making yet another standard

Yup, we've all seen it. But if this is a concern for you, you may be looking at Mitosis wrong. Rather than just yet-another-component-syntax, Mitosis is a compiler for the frontend, analogous to LLVM. A toolchain that embraces that there are, and forever will be, many ways of writing components. Mitosis defines a common intermediate representation that allows us to author components once then compile to many frameworks, just like LLVM lets us write code that can compile to any instruction set architecture. If you look at Mitosis this way, you may more clearly see the value.

Also similarly to LLVM, multiple syntaxes can compile to Mitosis. Our out-of-the-box syntax uses JSX, but we have explored others, such as a Vue/Svelte-like syntax. emits Mitosis IR, allowing you to turn designs to code for any supported framework. JSX and are the currently supported frontends of the compiler, and the frameworks listed below are the backends.

E2E test status

Target 01 one component 02 two components

NOTE: this matrix is programmatically generated and should not be manually edited.


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

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


Related Projects

  • Figma plugin: Convert Figma designs into high quality HTML, React, Vue, Svelte, Angular, Solid, etc code via Mitosis.
  • Builder: Drag and drop page builder and CMS for React, Vue, Angular, and more.
  • Qwik: An open-source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.
  • Partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker.

Made with love by

Popular Angular Projects
Popular Vue Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.