Mitosis Overview

What is Mitosis?

Mitosis is an open-source tool that transforms JSX components into fully functional components for frameworks like Angular, React, Qwik, Vue, Svelte, Solid, and React Native.

By writing your UI components once in JSX, you can deploy them across any platform, eliminating the need to rewrite code for each framework.

Using Mitosis, you can:

• Maintain a consistent design system across multiple frameworks (example)
• Sync your design systems from Figma to code and publish them to npm across frameworks
• Build high quality cross-framework SDKs (example)
• Avoid the pitfalls of web components by compiling to native framework code

Why use Mitosis?

With Mitosis, you can streamline your workflow and reduce redundancy without compromising the quality of your design system. Mitosis ensures that your design language speaks clearly and consistently, whether you're working in React, Vue, or any other framework.

By simplifying the development process through having one singular source of truth, Mitosis accelerates project timelines, allowing your team to focus more on innovation and less on integration.

Challenges with web components

While web components are standalone elements designed for reuse across web applications, they present some key challenges for design systems:

• Web components do not natively render on the server side. This can be problematic when using frameworks that rely on server-side rendering for performance and SEO benefits.
• Web components do not seamlessly integrate with your library or framework. For instance, web components do not inherently understand or interact with React's context.
• Web components often come with their own rendering libraries and dependencies, which can lead to performance overhead.

Although web components offer a modular and reusable approach to UI elements, these challenges can limit their viability. However, if supporting web components is a requirement, you can use Mitosis to generate them from a single source of truth. Mitosis supports Lit, Stencil, and raw web components as outputs.

Integration with Figma

Mitosis integrates with Figma to sync your design systems in Figma to code.

This integration streamlines the design-to-code process, ensuring that your design system remains consistent across all platforms from one singular source of truth. Learn more about our Figma integration.

How does it work

Mitosis uses a static subset of JSX, inspired by Solid. This means we can parse it to a simple JSON structure, then easily build serializers that target various frameworks and implementations.

export function MyComponent() {
  const state = useStore({
    name: 'Steve',
  });

  return (
    <div>
      <input value={state.name} onChange={(event) => (state.name = event.target.value)} />
    </div>
  );
}

becomes:

{
  "@type": "@builder.io/mitosis/component",
  "state": {
    "name": "Steve"
  },
  "nodes": [
    {
      "@type": "@builder.io/mitosis/node",
      "name": "div",
      "children": [
        {
          "@type": "@builder.io/mitosis/node",
          "name": "input",
          "bindings": {
            "value": "state.name",
            "onChange": "state.name = event.target.value"
          }
        }
      ]
    }
  ]
}

Which can be reserialized into many languages and frameworks. For example, to support angular, we just make a serializer that loops over the json and produces:

@Component({
  template: `
    <div>
      <input [value]="name" (change)="name = $event.target.value" />
    </div>
  `,
})
class MyComponent {
  name = 'Steve';
}

Adding framework support is surprisingly easy with the plugin system (docs coming soon).