Guide · Open source
How to use Mitosis: write components once for many frameworks
Updated · written with AI from the project's own documentation and checked against our catalogue data
Mitosis is an open-source TypeScript compiler from BuilderIO that lets you write component code once in a JSX-style syntax and output it for several frameworks, including React, Vue, Qwik, Solid, Angular and Svelte. This guide explains what it is, who it suits, how to get the project set up, and how to decide whether it fits your work. The source material for this page is a truncated README, so it covers the project's stated purpose and setup at a high level.
MitosisBuilderIO/mitosis · ★ 14.5k · MIT Install options & downloads Quick start
- 1Check prerequisites. Install Node.js, which the project lists as the requirement for setup.
- 2Get the repository. Clone the BuilderIO/mitosis repository to inspect the source locally.
- 3Install with a package manager. Follow the package-manager install steps in the full project README, since the provided copy is truncated.
- 4Write one component. Write a component once in JSX-style syntax with TypeScript.
- 5Compile for your targets. Compile the component for the frameworks you need, such as React, Vue, Svelte or Solid.
- 6Review the output. Check the compiled code for each framework against your expectations and test it.
What is Mitosis and what does it do?
Mitosis is a compiler. You write a component in a JSX-style syntax, and Mitosis outputs code for the target frameworks it supports. The project description lists React, Vue, Qwik, Solid, Angular, Svelte and more.
The main goal is to avoid maintaining the same component separately for each framework. Teams use it when the same UI has to exist in more than one framework.
Who should use Mitosis?
Mitosis fits best in a few specific situations. It is not a general recommendation for every front-end project.
- Teams maintaining the same UI components across more than one framework
- Library authors who want to publish components for several frameworks
- Developers already comfortable with JSX and TypeScript
- Projects that want to experiment with framework-agnostic component code
When should you not use Mitosis?
If your project uses one framework and has no plans to change, the compile step adds overhead without a clear benefit. Beginners new to web development will do better learning one framework first.
Compiled output may not match hand-written code exactly, so teams that need full support for every framework feature should check the output carefully before committing to it.
How do you install Mitosis?
Mitosis is installed through a package manager and requires Node.js. The README provided for this page is truncated, so check the project repository and the homepage at https://mitosis.builder.io for the full current install steps.
To get a local copy of the repository, the README shows a git clone command.
- Install Node.js before you start
- Clone the repository to get the source locally
- Follow the package-manager setup steps in the full README
git clone https://github.com/BuilderIO/mitosisHow do you write a component with Mitosis?
Write your component once using the JSX-style syntax and TypeScript that Mitosis supports. Keep the component logic in one source file so that the same definition can be compiled for each target framework.
The source material given here does not include a full component example, so refer to the project documentation for exact syntax and conventions.
Tips before you rely on Mitosis in production
Because the output may differ from hand-written code, review what each target framework receives. Test each compiled component in the frameworks your users run.
Mitosis is MIT licensed and written in TypeScript, so you can read the source and adapt it to your needs.
- Compare compiled output with hand-written components for each target
- Test every framework target, not just one
- Read the full README and project docs before adopting it
What people use it for
- Keeping one design system button or form field in sync across React and Vue apps
- Publishing a component library that works in several frameworks
- Prototyping a UI component in a framework-agnostic format before choosing a framework
- Maintaining a shared widget that must run inside Svelte and Angular projects
Frequently asked questions
Is Mitosis free to use?
Yes, Mitosis is released under the MIT licence, which is a permissive open-source licence. You can check the LICENSE file in the repository for the full terms.
What do I need to install Mitosis?
The project lists Node.js as the prerequisite. Install it first, then follow the package-manager setup steps in the full README.
Which frameworks does Mitosis support?
The project description names React, Vue, Qwik, Solid, Angular and Svelte, and mentions more beyond those.
What are alternatives to Mitosis?
Projects listed as comparable include Stencil, Svelte and Vue. Stencil is a good option if you want to build framework-agnostic web components directly, while Svelte and Vue are single-framework choices.
Why is my compiled output different from hand-written code?
The project notes that compiled output may not match hand-written code exactly. Compare the output for each target framework and test it, especially for features you rely on heavily.
Is Mitosis good for beginners?
Not really. It suits developers already comfortable with JSX and TypeScript. If you are new to web development, learn one framework first.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Mitosis suits teams and library authors who must maintain the same components across several frameworks, and developers already at home with JSX and TypeScript. If you use one framework with no plans to change, or you need every framework feature to behave exactly like hand-written code, pick a single framework or a comparable tool such as Stencil, Svelte or Vue instead.
Install options & downloads