Mitosis: Write Once, Run Everywhere 🌐

What is Mitosis?

Mitosis is an open-source project by Builder.io that provides a unified development experience across different frontend frameworks. Here’s what it offers:

1. Single Codebase, Multiple Frameworks:

   • With Mitosis, you can build your components in a single codebase using a familiar syntax (similar to JSX).

   • These components can then be compiled to work seamlessly with various frameworks, eliminating the need to rewrite the same component logic for different platforms.

2. Supported Frameworks:

   • Mitosis compiles your components to native code for the following frameworks:

     • React

     • Vue

     • Angular

     • Svelte

     • Solid

     • Alpine

     • Qwik

     • And more!

3. Why Use Mitosis?

   • Consistent Design System:

     • Imagine maintaining a consistent design system across multiple frameworks. Mitosis makes it possible!

     • You can create your UI components once and reuse them across different projects, regardless of the frontend technology stack.

   • Sync Design Systems from Figma to Code:

     • Mitosis allows you to sync your design systems directly from Figma to code.

     • Publish your design tokens (colors, typography, spacing, etc.) to npm, making them accessible across all supported frameworks.

   • Avoid Web Component Pitfalls:

     • While web components are powerful, they come with challenges like encapsulation, performance overhead, and limited framework integration.

     • Mitosis compiles your components to native framework code, avoiding these pitfalls.

QuickStart with Mitosis

1. To create a new Mitosis project from scratch, run the following command:

    npm create @builder.io/mitosis@latest
   

   This sets up a fresh Mitosis project.

2. Read the README.md generated in your new project. It explains the project structure and provides a walkthrough on building and testing your components.

Live Example: Playground Link

Resources

• Documentation: Dive deeper into Mitosis by exploring the official documentation.

• Playground: Experiment with Mitosis in the interactive playground.

• Figma Integration: Learn how to integrate Figma with Mitosis for a seamless design-to-code experience.

• Mitosis Discord: Join the Mitosis community on Discord.

Contribute to Mitosis on GitHub

• Interested in contributing? Check out the developer docs to get started.

• Explore our list of good first issues and become part of the Mitosis journey!

😊 Happy coding!

---