explaingit

builderio/mitosis

★ 13,834TypeScriptAudience · developerComplexity · 3/5Setup · moderate

TLDR

Mitosis lets you write UI components once in a single format and compile them to React, Vue, Angular, Svelte, Solid, and more, so you do not need separate codebases for each framework.

Mindmap

mindmap
  root((Mitosis))
    What it does
      Write once compile anywhere
      Design system sync
      Figma integration
    Output frameworks
      React Vue Angular
      Svelte Solid
      Qwik Alpine
    Tech stack
      TypeScript
      JSX-like syntax
      npm CLI
    Use cases
      Component libraries
      Multi-framework teams
      Design systems
    Features
      Web playground
      Figma sync
      Community Discord
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Build a reusable UI component library that compiles to React, Vue, Angular, and Svelte from a single source.

USE CASE 2

Keep a Figma design system in sync with your code components without manual re-implementation.

USE CASE 3

Migrate a React component library to also support Vue or Svelte users without rewriting from scratch.

USE CASE 4

Maintain a consistent design system across multiple products built on different frontend frameworks.

Tech stack

TypeScriptReactVueAngularSvelteSolid

Getting it running

Difficulty · moderate Time to first run · 30min

Requires Node.js, each output framework may need its own build tooling configured separately.

In plain English

Mitosis is a tool for writing UI components once and automatically compiling them to the native format used by multiple front-end frameworks. Instead of building the same button, form, or navigation bar separately in React, Vue, Svelte, and Angular, you write it once in Mitosis's format and the compiler generates working code for each target. The tool is made by Builder.io, the company behind a visual website builder. It grew out of their need to maintain a single design system that works across applications built on different frameworks. Teams that use multiple frameworks, or that maintain component libraries for others to use, often have to duplicate code across framework versions and keep them all in sync as components evolve. Mitosis addresses this by treating the single-source Mitosis file as the source of truth. Setting up a new Mitosis project takes one command: npm create @builder.io/mitosis@latest. This generates a project structure with the Mitosis component files and configuration for each target framework. Once written, components compile to React, Vue, Angular, Svelte, Solid, Alpine, and Qwik, among others. A web-based playground is available for trying out the compilation without installing anything locally. Mitosis integrates with Figma, allowing teams to keep a Figma design system in sync with the code version. When a Figma component is updated, the integration can push the change through to the compiled outputs. This is intended for teams that want design and code to stay aligned without manual re-implementation. The project is TypeScript-based, open source, and maintained on GitHub with a Discord community for contributors and users.

Copy-paste prompts

Prompt 1
How do I set up a new Mitosis project and write my first component that compiles to both React and Vue?
Prompt 2
What is the difference between writing a component in Mitosis versus writing it directly in React?
Prompt 3
How do I integrate Mitosis with my Figma design system so changes stay in sync?
Prompt 4
I want to compile a Mitosis component to Angular. What does the output look like compared to the source?
Prompt 5
How do I add custom styling to a Mitosis component and make sure it works in all target frameworks?
Open on GitHub → Explain another repo

← builderio on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.