Streamline Development with Mitosis: A Universal Component Compiler

Understanding Mitosis

Mitosis is an advanced tool designed to simplify the development process by compiling components written in a JSX-like syntax into multiple frameworks. It supports React, Vue, Svelte, Angular, Qwik, Solid, and more, allowing developers to write components once and deploy them across various environments.

Getting Started with Mitosis

To begin using Mitosis, you need to install the CLI via npm:

npm install @builder.io/mitosis-cli

Example Component

Create a component in your project, such as a simple counter:

// 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>
  );
}

Compilation Output Examples

Mitosis allows the above component to be compiled into different frameworks:

React Version

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>
  );
}

Vue 3 Version

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

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

Svelte Version

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

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

Real-World Applications

Mitosis is utilized by Builder.io to maintain a consistent SDK across all major frameworks with a single codebase. This approach prevents the need for multiple codebases and reduces the likelihood of framework-specific bugs.

Supported outputs include:

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

Configuration Options

For custom setup, modify the mitosis.config.js file:

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

When to Implement Mitosis

Consider using Mitosis in scenarios such as:

• Building design system libraries requiring multi-framework support
• Developing SDKs for embedding in customer applications
• Facilitating cross-framework component sharing
• Assisting teams transitioning between frameworks

Begin Your Journey

Explore the official documentation and GitHub repository to get started with Mitosis and streamline your multi-framework development workflow.