• Stars
    star
    12,266
  • Rank 2,656 (Top 0.06 %)
  • Language
    TypeScript
  • License
    MIT License
  • Created almost 4 years ago
  • Updated 2 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.

Write components once, compile to every framework:

Try our interactive fiddle

code style: prettier PRs Welcome License Types

PS: We are actively looking for folks interested in becoming contributors to Mitosis. Given its large surface area, there is a ton of room for any engineer to make a large and sustained impact on the project. We invest a ton of time in helping newcomers get onboarded, and teach them how to make changes to the codebase (see the following examples: #847, #372, #734). If interested, look at our list of good first issues or reach out on our Discord

Table of contents

Quick Start Guide

Install

npm install @builder.io/mitosis-cli @builder.io/mitosis

Setup mitosis.config.js

/** @type {import('@builder.io/mitosis').MitosisConfig} */
module.exports = {
  files: 'src/**',
  targets: ['vue3', 'solid', 'svelte', 'react'],
};

Check our configuration docs for how to setup the Mitosis config file.

Setup TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@builder.io/mitosis"
  }
}

Install ESLint Rules

Install our ESLint plugin to have highly useful rules that guide you as you build your Mitosis components.

⚠️ NOTE: We highly recommend you setup all of the ESLint rules, because they will point out some of Mitosis' limitations and avoid confusion.

Create a Component

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

type Props = {
  message: string;
};

export default function MyBasicComponent(props: Props) {
  const state = useStore({
    name: 'Foo',
  });

  return (
    <div>
      {props.message || 'Hello'} {state.name}! I can run in React, Vue, Solid or Svelte!
    </div>
  );
}

Build

npm exec mitosis build

🎉 You should now have an output directory with your compiled components in all 4 frameworks!

Examples

Here are some helpful resources on trying out Mitosis:

What is Mitosis?

  • this talk by Sami Jaber at React Day Berlin is a great intro to Mitosis. It gives a good overview of the impetus behind Mitosis, and a high-level understanding of its different pieces.

  • The below video is a brief introduction by Steve Sewell. Mitosis Video

Docs

Curious about how Mitosis code works under the hood, and how to use it? Learn more in our in-depth docs.

Why use Mitosis?

Mitosis is an incredibly powerful and flexible tool. So far, we have identified 3 broad categories of engineering teams that stand to benefit greatly from it:

Design Systems Maintainers

If you are the maintainer of a design system library that started off in one web framework, then you have felt the tremendous amount of maintenance pain and duplication when creating new versions for subsequent frameworks. Look no further than the popular React library Chakra UI, and how the maintainers have decided to create Zag.js after feeling the pain of maintaining state-logic code across both their React and Vue libraries. While Zag.js focuses on writing framework-agnostic interactions, Mitosis focuses on writing framework-specific components. (PS: We are working on building examples that combine these two together. TBD!)

Teams using multiple web frameworks

If you are part of a team/organization that has multiple frontends built in different frameworks, then you know that coordinating your design system across all of them for a cohesive experience and feel is an absolute nightmare. Mitosis is an excellent tool to eliminate this class of problems, as it allows you to define your designs in your components once and deploy them to all of your separate frontends.

Teams building web SDKs

If your team is building SDKs for a product that integrates directly into a web framework and involves providing components to the end user, then Mitosis is a perfect fit for your team. Our team at Builder.io has this exact use-case: our new generation of SDKs is built with Mitosis! Our engineers have received glowing praise from our sales team for speed of delivery, and all it took was a switch flip 😉


What about XKCD

XKCD comic about solving too many standards by creating new standards just making yet another standard

Yup, we've all seen it. But if this is a concern for you, you may be looking at Mitosis wrong. Rather than just yet-another-component-syntax, Mitosis is a compiler for the frontend, analogous to LLVM. A toolchain that embraces that there are, and forever will be, many ways of writing components. Mitosis defines a common intermediate representation that allows us to author components once then compile to many frameworks, just like LLVM lets us write code that can compile to any instruction set architecture. If you look at Mitosis this way, you may more clearly see the value.

Also similarly to LLVM, multiple syntaxes can compile to Mitosis. Our out-of-the-box syntax uses JSX, but we have explored others, such as a Vue/Svelte-like syntax. Builder.io emits Mitosis IR, allowing you to turn designs to code for any supported framework. JSX and Builder.io are the currently supported frontends of the compiler, and the frameworks listed below are the backends.

E2E test status

Target 01 one component 02 two components
alpine
angular
qwik
react
solid
svelte
vue2
vue3

NOTE: this matrix is programmatically generated and should not be manually edited.

Contribute

Interested in contribute? Head over to the developer docs and see how you can get setup & started!

Once you're ready, checkout our issues page and grab your first issue!

Community

Related Projects

  • Figma plugin: Convert Figma designs into high quality HTML, React, Vue, Svelte, Angular, Solid, etc code via Mitosis.
  • Builder: Drag and drop page builder and CMS for React, Vue, Angular, and more.
  • Qwik: An open-source framework designed for best possible time to interactive, by focusing on resumability of server-side-rendering of HTML, and fine-grained lazy-loading of code.
  • Partytown: Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉


Made with love by Builder.io

More Repositories

1

qwik

Instant-loading web apps, without effort
TypeScript
20,052
star
2

gpt-crawler

Crawl a site to generate knowledge files to create your own custom GPT from a URL
TypeScript
18,484
star
3

partytown

Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉
TypeScript
12,971
star
4

builder

Visual Development for React, Vue, Svelte, Qwik, and more
TypeScript
7,258
star
5

ai-shell

A CLI that converts natural language to shell commands.
TypeScript
4,068
star
6

figma-html

Builder.io for Figma: AI generation, export to code, import from web
TypeScript
3,117
star
7

micro-agent

An AI agent that writes (actually useful) code for you
TypeScript
2,663
star
8

gpt-assistant

An experiment to give an autonomous GPT agent access to a browser and have it accomplish tasks
TypeScript
512
star
9

hydration-overlay

Overlay for hydration errors with explicit diff between renders.
CSS
477
star
10

framework-benchmarks

Test each framework for it's performance cost
TypeScript
473
star
11

nextjs-shopify

The ultimate starter for headless Shopify stores
TypeScript
441
star
12

vscode

Builder.io for VSCode - turn designs into code!
TypeScript
174
star
13

SSDiff

TypeScript
139
star
14

build.

A new visual programming language that reads and writes Typescript and Javascript
TypeScript
128
star
15

builder-shopify-hydrogen

Builder.io Visual CMS + page builder example with Shopify Hydrogen
TypeScript
77
star
16

gatsby-starter-builder

Gatsby example with drag and drop page building
JavaScript
68
star
17

nextjs-edge-personalization-ab-testing

High performance personalization & a/b testing example using Next.js, Edge Middleware, and Builder.io
TypeScript
58
star
18

snap

The fastest web framework
TypeScript
50
star
19

ts-lite

Compiled TypeScript. Generates Go, Swift, Kotlin, WASM, Binary
JavaScript
50
star
20

gatsby-builder-shopify

A starter for Gatsby + Shopify + Builder.io
TypeScript
32
star
21

qwik-city-build

`@builder.io/qwik-city` build artifacts from https://github.com/organizations/BuilderIO/qwik
JavaScript
25
star
22

qwik-tw-vercel-starter-kit

A starter kit for Qwik on Vercel
TypeScript
19
star
23

demo-editor

JavaScript
12
star
24

nextjs-builder-edge-personalization

TypeScript
11
star
25

nextjs-builder-starter

TypeScript
11
star
26

edge-personalize

Personalize and a/b test your static pages at the edge. Static speed with dynamic optimizations!
TypeScript
9
star
27

headlessapp.store

TypeScript
8
star
28

react-design-system-demo

JavaScript
8
star
29

sfcc-composable-storefront-example

SFCC + Builder.io Composable Storefront
JavaScript
8
star
30

qwik-city-e2e

Use to test Qwik City on each server
HTML
6
star
31

qwik-docs-es

TypeScript
6
star
32

this-package-uses-fetch

6
star
33

qwik-build

Build artifacts from https://github.com/organizations/BuilderIO/qwik
JavaScript
6
star
34

blog-example

Builder.io blog example
JavaScript
6
star
35

jsx-qwik-worker-post

A repo showing worker$
JavaScript
6
star
36

perf-experiments

Performance experiments
Astro
6
star
37

http-debug-proxy

This project contains a set up to create a HTTP proxy for the https://cdn.builder.io/ endpoint.
JavaScript
6
star
38

qwik-react-framer-motion

A demo for React Framer Motion inside a Qwik application
TypeScript
5
star
39

resumable-react-post

The code for the blog post: "Resumable React: How To Use React Inside Qwik"
TypeScript
5
star
40

builder-fiddle-demos

Demos of fun stuff for Builder fiddles
TypeScript
5
star
41

nextjs-app-router-example

TypeScript
5
star
42

vcp-design-systems-examples

Starters for experimenting with VCP and different design systems
TypeScript
5
star
43

builder-qwik-example

An example project using Builder.io's drag and drop headless CMS with Qwik
TypeScript
4
star
44

personalization-utils

TypeScript
3
star
45

mitosis-build

Build artifacts from https://github.com/BuilderIO/mitosis
3
star
46

qwik-create-cli-build

JavaScript
3
star
47

kibocommerce-nextjs-starter

A KiboCommerce + Builder.io store built on NextJS
TypeScript
3
star
48

builder-swift

Swift SDK for Builder.io
Swift
3
star
49

nextjs-elasticpath

TypeScript
2
star
50

qwik-raw-data

1
star
51

qase-for-qwik

A demo repo to showcase Qwik
TypeScript
1
star
52

gatsby-builder-transform-images

JavaScript
1
star
53

block-publish

CLI tool to block directly using npm publish
JavaScript
1
star
54

qwik-docs

WIP Qwik-docs
JavaScript
1
star
55

unified-demo

Unified Demo of builder use cases with next.js app router
TypeScript
1
star
56

qwik-labs-build

Continues build artifacts
JavaScript
1
star