https://github.com/BuilderIO/mitosis

Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more.
https://github.com/BuilderIO/mitosis

angular builder compiler declarative figma jsx jsx-lite liquid no-code react shopify solid svelte visual vue

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/BuilderIO/mitosis
• Owner: BuilderIO
• License: mit
• Created: 2020-11-06T01:09:07.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2024-04-12T19:55:31.000Z (9 months ago)
• Last Synced: 2024-04-14T03:59:33.110Z (9 months ago)
• Topics: angular, builder, compiler, declarative, figma, jsx, jsx-lite, liquid, no-code, react, shopify, solid, svelte, visual, vue
• Language: TypeScript
• Homepage: https://mitosis.builder.io
• Size: 17.9 MB
• Stars: 10,747
• Watchers: 87
• Forks: 462
• Open Issues: 173
• Metadata Files:
  • Readme: README.MD
  • License: LICENSE
  • Codeowners: CODEOWNERS

Awesome Lists containing this project

• awesome - BuilderIO/mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more. (TypeScript)
• awesome-solid-js - Mitosis
• awesome-lesscode - mitosis - commit/BuilderIO/mitosis?label=%E6%9C%80%E5%90%8E%E6%9B%B4%E6%96%B0%E6%97%B6%E9%97%B4) (精选 LessCode 项目)
• awesome-qwik - Mitosis
• StarryDivineSky - BuilderIO/mitosis
• jimsghstars - BuilderIO/mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more. (TypeScript)
• awesome-starred - BuilderIO/mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more. (TypeScript)
• awesome-starred - BuilderIO/mitosis - Write components once, run everywhere. Compiles to React, Vue, Qwik, Solid, Angular, Svelte, and more. (TypeScript)

README

        








  

    

    

  





  Write components once, compile to every framework








  

  

  

  

  



## Overview

[Mitosis](https://mitosis.builder.io/docs/overview/) provides a unified development experience across all frameworks, enabling you to build components in a single codebase and compile them to React, Vue, Angular, Svelte, Solid, Alpine, Qwik, and more.

Using Mitosis, you can:

- Maintain a consistent design system across multiple frameworks ([example](https://github.com/db-ui/mono))

- Sync your [design systems from Figma to code](https://mitosis.builder.io/docs/figma/) and publish them to npm across frameworks

- Avoid the [pitfalls of web components](https://mitosis.builder.io/docs/overview/) by compiling to native framework code

_PS: We are actively looking for folks interested in becoming contributors to Mitosis. If interested, look at our list of [good first issues](https://github.com/BuilderIO/mitosis/contribute) or reach out on our [Discord](https://discord.gg/yxjk5vn6pn)_

![Gif example of devloping with Mitosis](https://cdn.builder.io/api/v1/file/assets%2FYJIGb4i01jvw0SRdL5Bt%2F868af1e6d9fd4923b18ecd1d892f3a6e)

## Quickstart

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

```bash

npm create @builder.io/mitosis@latest

```

Once completed, make sure to read the `README.md` generated in your new project. It will explain the structure of your project, and provide a walkthrough on how to build/test your components.

Read the full [getting started docs](https://mitosis.builder.io/docs/quickstart/) for more.

### Integration with Figma

To make generating Mitosis components easier, as well as to keep your design system in code in sync with your design system in Figma, Mitosis integrates with Figma.

Learn more about our [Figma integration](https://mitosis.builder.io/docs/figma).

![Demo of using Mitosis with Figma](https://cdn.builder.io/api/v1/file/assets%2FYJIGb4i01jvw0SRdL5Bt%2Fde65b7d174354c0baf189ee4e652a31b)

## Resources

- [Documentation](https://mitosis.builder.io/docs)

- [Playground](https://mitosis.builder.io/playground)

- [Figma integration](https://mitosis.builder.io/docs/figma/)

- [Mitosis Discord](https://discord.gg/yxjk5vn6pn)

## Contribute

Interested in contribute? Head over to the [CONTRIBUTING](CONTRIBUTING.md) docs and see how you can get setup & started!

Once you're ready, checkout our [issues](https://github.com/BuilderIO/mitosis/contribute) page and grab your first issue!