Mitosis — Write Components Once, Compile to Every Framework

Introduction

Mitosis is a compiler that takes UI components written in a lightweight JSX-based syntax and outputs idiomatic code for React, Vue, Angular, Svelte, Solid, Qwik, Web Components, React Native, and SwiftUI. It solves the problem of maintaining parallel component libraries across multiple frameworks.

What Mitosis Does

• Compiles a single component definition into idiomatic output for 10+ frontend frameworks
• Uses a simplified JSX subset (Mitosis JSX) that maps cleanly to each target's paradigm
• Generates framework-native code that looks hand-written, not wrapped or shimmed
• Supports state management, props, lifecycle hooks, and styling in the source format
• Provides a Visual Studio Code extension with syntax highlighting and real-time preview

Architecture Overview

Mitosis parses .lite.tsx source files into a JSON-based intermediate representation (IR) called MitosisComponent. Each target has a code generator that walks the IR and emits idiomatic framework code. State declarations become React hooks, Vue reactive refs, or Svelte stores depending on the target. The compiler handles framework-specific patterns like Angular modules, Vue SFCs, and Solid signals automatically. Plugins can transform the IR before code generation for customization.

Self-Hosting & Configuration

• Install the CLI with npm install @builder.io/mitosis-cli for command-line compilation
• Write components as .lite.tsx files using Mitosis JSX syntax with useStore() for state
• Configure output targets and options in mitosis.config.js at your project root
• Use the --to flag to compile to specific targets: react, vue, svelte, angular, solid, qwik
• Integrate into CI pipelines to auto-generate framework packages from a single component library

Key Features

• Write once, deploy to React, Vue, Angular, Svelte, Solid, Qwik, Web Components, React Native, and SwiftUI
• Output is clean, readable, framework-idiomatic code — not runtime wrappers or adapters
• Visual editor integration with Builder.io for drag-and-drop component design
• Plugin system for custom transformations on the intermediate representation before output
• TypeScript support with full type inference carried through to generated code

Comparison with Similar Tools

• Web Components — universal standard but requires polyfills and lacks framework-native feel; Mitosis outputs native framework code
• Stencil — compiles to Web Components specifically; Mitosis targets the full range of modern frameworks
• Bit — component sharing platform that still requires per-framework implementations; Mitosis generates them automatically
• module-federation — shares runtime bundles between micro-frontends; Mitosis generates source code at build time for each target
• Astro — renders framework components at build time for static sites; Mitosis converts component source across frameworks

FAQ

Q: How much of React/Vue/Angular does Mitosis support? A: Mitosis supports the most common patterns: state, props, refs, lifecycle hooks, event handlers, conditional rendering, and loops. Advanced framework-specific features may require target-specific overrides.

Q: Does the generated code need a Mitosis runtime? A: No. Generated code is standalone and framework-native. There is no Mitosis runtime dependency in production output.

Q: Can I use Mitosis for an entire application? A: Mitosis is best suited for shared component libraries. Full applications typically use framework-specific features that go beyond what the Mitosis subset covers.

Q: Who uses Mitosis in production? A: Builder.io uses Mitosis to maintain its visual editor SDK across React, Vue, Angular, Svelte, and other frameworks from a single codebase.

Sources

• https://github.com/BuilderIO/mitosis
• https://mitosis.builder.io/