Mitosis Has a Free Write-Once Component Compiler — Here's How to Use It

Building a design system? You need React, Vue, Svelte, AND Angular components. Mitosis lets you write a component once — it compiles to all frameworks automatically.

What Is Mitosis?

Mitosis is a tool that compiles components written in a JSX-like syntax to React, Vue, Svelte, Angular, Qwik, Solid, and more. Write once, run everywhere.

Quick Start

npm install @builder.io/mitosis-cli

// src/components/Counter.lite.tsx
import { useState } from '@builder.io/mitosis';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

Output Examples

Compiles to React

import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

Compiles to Vue 3

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Compiles to Svelte

<script>
  let count = 0;
</script>

<div>
  <p>Count: {count}</p>
  <button on:click={() => count++}>Increment</button>
</div>

Real-World Use Case

Builder.io uses Mitosis to maintain their SDK across all major frameworks. One codebase powers:

• @builder.io/react
• @builder.io/vue
• @builder.io/svelte
• @builder.io/angular
• @builder.io/qwik

Instead of maintaining 5 separate codebases with 5 separate bugs.

Configuration

// mitosis.config.js
module.exports = {
  targets: ['react', 'vue', 'svelte', 'angular', 'solid'],
  dest: 'output',
  options: {
    react: { typescript: true },
    vue: { api: 'composition', typescript: true },
    svelte: { typescript: true },
  },
};

Supported Output Targets

React, Vue 2/3, Svelte, Angular, Solid, Qwik, React Native, Swift, Kotlin, HTML/CSS, Web Components, Stencil, Marko, Lit, Alpine.js

When to Use Mitosis

• Design system libraries (need multi-framework support)
• SDKs that embed in customer apps
• Cross-framework component sharing
• Teams migrating between frameworks

Get Started

• Documentation
• GitHub — 12K+ stars
• Playground

---

Building cross-framework components? My Apify scrapers work with any stack. Custom solutions: [e-mail]