mitosis

Mitosis — Write Once, Compile Everywhere

Overview

Mitosis (by Builder.io) is a compile-time framework that lets you write UI components in a static JSX subset, then compile them to React, Vue, Angular, Svelte, Solid, Qwik, React Native, Web Components, and more. It's the key intermediary format for design systems that need to ship components to multiple frameworks from a single source.

How It Works

Mitosis JSX (.lite.tsx)
        │
        ▼
   ┌──────────┐
   │  Parse    │  JSX → Mitosis JSON (intermediate AST)
   └────┬─────┘
        ▼
   ┌──────────┐
   │ Compile   │  JSON → Target framework code
   └────┬─────┘
        ▼
React, Vue, Angular, Svelte, Solid, Qwik, Lit, Stencil, RN, ...

Supported Targets

Target	Output
React	.tsx with hooks
Vue (3)	.vue SFC with Composition API
Angular	.component.ts with decorators
Svelte	.svelte SFC
Solid	.tsx with signals
Qwik	.tsx with $ closures
React Native	.tsx with RN primitives
Lit	.ts with LitElement
Stencil	.tsx Web Components
Web Components	Vanilla custom elements
Swift (beta)	SwiftUI views

Getting Started

# Create a new Mitosis project
npm create @builder.io/mitosis@latest

# Or add to an existing project
npm install @builder.io/mitosis-cli @builder.io/mitosis

Component Syntax

Mitosis uses a static subset of JSX — no arbitrary JS expressions, hooks, or closures. This constraint enables reliable compilation to any target.

Basic Component

// Button.lite.tsx
import { useStore } from "@builder.io/mitosis";

export default function Button(props) {
  const state = useStore({
    count: 0,
  });

  return (
    <button
      class={`btn btn-${props.variant}`}
      onClick={() => (state.count = state.count + 1)}
    >
      {props.children} ({state.count})
    </button>
  );
}

Props

Props are received as the function argument and accessed via props.name:

export default function Avatar(props) {
  return (
    <img
      src={props.src}
      alt={props.alt}
      class={`avatar avatar-${props.size || "md"}`}
    />
  );
}