Repolode
Submit
BuilderIO

BuilderIO/mitosis

Write UI components once in a JSX-like syntax and compile them to React, Vue, Angular, Svelte, Solid, Qwik and more.

View on GitHubWebsite
Stars
14,445
Forks
679
Open issues
177
Last commit
22 days ago

What is it?

Mitosis is a compiler for writing UI components in a single codebase and generating native code for multiple frameworks. Components are authored in a JSX-like format and compiled to React, Vue, Angular, Svelte, Solid, Alpine, Qwik and other targets, so teams can keep one source of truth instead of maintaining parallel implementations.

The main use cases are maintaining a design system that must ship across several frameworks, and publishing those components to npm for each framework. The project also offers a Figma integration for syncing design system components from Figma into Mitosis code. Compiling to native framework code is positioned as an alternative to web components.

The project provides a CLI to scaffold new projects with npm create, along with documentation and an online playground for trying the compiler.

Key features

  • 01Compiles one component source to React, Vue, Angular, Svelte, Solid, Alpine and Qwik.
  • 02Uses a JSX-like authoring format.
  • 03Integrates with Figma to sync design system components into code.
  • 04Generates native framework code rather than web components.
  • 05Includes an online playground and getting-started tooling.

Use cases

  • Maintaining a design system consumed by teams using different frameworks.
  • Publishing a component library to npm with builds for several frameworks.
  • Generating component code from Figma designs for multiple front-end stacks.

Quick start

  1. 1

    Create a new Mitosis project with the create command

    npm create @builder.io/mitosis@latest
  2. 2

    Read the README generated in your new project for how to build and test components

Things to know

  • Mitosis is a compiler, so generated code may need manual tweaks for framework-specific needs.

Topics

#compiler#components#design-system#react#vue#angular#svelte#figma#builder#declarative

FAQ

What is mitosis?
Write UI components once in a JSX-like syntax and compile them to React, Vue, Angular, Svelte, Solid, Qwik and more. Mitosis is a compiler for writing UI components in a single codebase and generating native code for multiple frameworks. Components are authored in a JSX-like format and compiled to React, Vue, Angular, Svelte, Solid, Alpine, Qwik and other targets, so teams can keep one source of truth instead of maintaining parallel implementations.
Is mitosis free to use? What license does it have?
mitosis is open source under the MIT license. Check the license terms before using it in commercial products.
Is mitosis still maintained?
Actively maintained. The last commit to mitosis was on Sep 29, 2026.
What can I use mitosis for?
Maintaining a design system consumed by teams using different frameworks. Publishing a component library to npm with builds for several frameworks. Generating component code from Figma designs for multiple front-end stacks.
How do I install mitosis?
Create a new Mitosis project with the create command: npm create @builder.io/mitosis@latest Read the README generated in your new project for how to build and test components
Where can I get mitosis?
The source code and installation instructions are on GitHub: https://github.com/BuilderIO/mitosis

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects