Write Once, Ship Everywhere: Compiling Components to Any Framework

You know the drill: your team picks a framework, builds a design system, and then someone asks for a Vue version of the same component library. Or an Angular one. Or Svelte. Suddenly you're maintaining parallel codebases, fixing the same bug in three different languages, and wondering if there's a better way. There is. It's called Mitosis, and it lets you write components in a single codebase and compile them to just about every major framework you've heard of.

Mitosis is an open-source project from Builder.io that takes a pragmatic approach to the framework fragmentation problem. Instead of trying to create yet another runtime that abstracts away your framework of choice, it compiles your source code into native framework components. That means no wrapper layers, no compatibility shims—just real, idiomatic code for each target.

What It Does

Mitosis is a compiler for UI components. You write your component logic and markup once, in a framework-agnostic syntax that looks familiar if you've used React or similar libraries, and Mitosis transforms it into React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.

The core idea is straightforward: your source of truth is a single component definition, and the compiler handles the rest. Under the hood, Mitosis parses your code, builds an intermediate representation, and then generates output tailored to each target framework. The result is that you get the performance and developer experience of native framework code without the duplication.

One of the more interesting use cases is syncing design systems from Figma to code. Mitosis integrates directly with Figma, which means you can generate components from your designs and publish them to npm across multiple frameworks. That's a workflow that would normally involve an army of developers manually converting designs into each framework's syntax.

Why It's Cool

The thing that makes Mitosis stand out is that it doesn't try to force you into a meta-framework bubble. You're not shipping a runtime that interprets your components at the user's expense. You're shipping actual React code to React users, actual Vue code to Vue users, and so on.

Here's what I find genuinely valuable about this approach:

• You avoid the web components trap. If you've ever built a design system with web components, you know the pain: styling encapsulation quirks, shadow DOM gotchas, and awkward API surfaces. Mitosis sidesteps all of that by compiling to native framework code, so you get the benefits of cross-framework compatibility without the runtime overhead.

• A consistent design system, actually maintained. The README points to a real-world example: the db-ux-design-system uses Mitosis to maintain a consistent design system across multiple frameworks. That's not a toy project—it's a production system using this tool to keep things in sync.

• Figma to code, without the manual grind. The Figma integration is a big deal if you're working with a design team. Rather than hand-coding every component variant, you can generate Mitosis components from Figma and then compile them to whatever frameworks your company uses. It won't replace your frontend engineers, but it'll save them from the most tedious parts of the job.

• It's actively looking for contributors. The maintainers are upfront about wanting help, with a list of good first issues and an active Discord. That's a good sign for a project's long-term health.

How to Try It

Getting started is about as easy as it gets. Run the create command and you'll have a new Mitosis project scaffolded with everything you need:

npm create @builder.io/mitosis@latest

Once the command finishes, the generated project includes a README that walks you through the structure and how to build and test your components. There's also a full getting started guide in the docs if you want to dig deeper.

If you want to poke around before committing to a full project, there's a playground on the Mitosis website where you can experiment with components and see the compiled output for different frameworks. That's the fastest way to get a feel for how the compiler works and whether it fits your workflow.

You can find the repository at github.com/builderio/mitosis, with links to the documentation, playground, and Figma integration in the README.

Final Thoughts

Mitosis is a solid answer to a real problem. If you're a solo developer or a small team shipping components to multiple frameworks, it could save you a significant amount of maintenance overhead. If you're a larger organization with a design system that needs to live everywhere, the Figma integration and multi-framework compilation make it a genuinely compelling option.

It's not magic—you'll still need to understand the target frameworks to debug issues and handle edge cases. But as a way to reduce duplication and keep your design system in sync, it's worth a serious look. The project is active, the maintainers are engaged, and the approach feels like the right balance between pragmatism and ambition. Give it a spin on your next cross-framework project.

Follow @githubprojects for more developer tools and open source projects.