You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
_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/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) or reach out on our [Discord](https://discord.gg/SNusEyNGsx)_
22
-
23
-
## Table of contents
24
-
25
-
-[Quick Start](#quick-start)
26
-
-[Manual Setup](#manual-setup)
27
-
-[Examples](#examples)
28
-
-[What is Mitosis](#what-is-mitosis)
29
-
-[In-depth Docs](#docs)
30
-
-[Why use Mitosis?](#why-use-mitosis)
31
-
-[Design Systems Maintainers](#design-systems-maintainers)
32
-
-[Teams using multiple web frameworks](#teams-using-multiple-web-frameworks)
33
-
-[Teams building web SDKs](#teams-building-web-sdks)
34
-
-[Contribute](#contribute)
35
-
-[Community](#community)
36
-
-[Related Projects](#related-projects)
37
-
38
-
## Quick Start
39
-
40
-
To create a new Mitosis project from scratch, run the following `create` command:
41
-
42
-
```bash
43
-
npm create @builder.io/mitosis@latest
44
-
```
45
-
46
-
It will prompt you for a project name, and create a new directory with a basic monorepo project structure that includes:
47
-
48
-
- npm workspaces
49
-
- multiple generated outputs, along with build steps for each
50
-
- multiple test servers that import the outputs for convenient debugging/testing
51
-
52
-
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.
53
-
54
-
## Manual Setup
55
-
56
-
If you would like to install Mitosis manually, you can do so with the following steps below. These generally follow the same steps as the `create` command.
57
-
58
-
### Note on Monorepo structure
59
-
60
-
Given that Mitosis generates code for multiple frameworks, it is highly recommend to treat each output as its own npm package for building/publishing purposes. This means that you will most likely need a monorepo solution (such as npm/pnpm/yarn workspaces, or Nx, or Turborepo). While we provide this out-of-the-box in the `create` command, we will leave it up to the user to implement it however they see fit in the Manual setup guide.
61
-
62
-
### Installation
63
-
64
-
First, in a new npm project, install the Mitosis CLI and the Mitosis packages:
targets: ['svelte', 'react', 'qwik', 'vue'], //define your desired outputs here
79
-
};
80
-
```
81
-
82
-
Check [our configuration docs](/docs/configuration.md) for how to setup the Mitosis config file.
83
-
84
-
### Setup TypeScript
85
-
86
-
To setup TypeScript, add the following to your `tsconfig.json`:
87
-
88
-
```jsonc
89
-
// tsconfig.json
90
-
{
91
-
"compilerOptions": {
92
-
"jsx":"preserve",
93
-
"jsxImportSource":"@builder.io/mitosis"
94
-
}
95
-
}
96
-
```
21
+
## Overview
97
22
98
-
### Create a Component
23
+
Mitosis 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.
99
24
100
-
Now, create a `MyComponent.lite.tsx` file in the `src/components` directory:
25
+
Using Mitosis, you can:
101
26
102
-
```tsx
103
-
// src/components/MyComponent.lite.tsx
104
-
import { useStore } from'@builder.io/mitosis';
27
+
- Maintain a consistent design system across multiple frameworks ([example](https://github.com/db-ui/mono))
28
+
- Sync your [design systems from Figma to code](/docs/figma) and publish them to npm across frameworks
29
+
- Build high quality cross-framework SDKs ([example](https://github.com/BuilderIO/builder/tree/main/packages/sdks#builderio-sdks))
30
+
- Avoid the [pitfalls of web components](https://mitosis.builder.io/docs/overview/) by compiling to native framework code
105
31
106
-
typeProps= {
107
-
message:string;
108
-
};
32
+
Additionally, Mitosis [integrates with Figma](https://mitosis.builder.io/docs/figma/) to sync your design systems in Figma to code.
{props.message||'Hello'}{state.name}! I can run in React, Vue, Solid, Svelte, Qwik
118
-
andeverything else!
119
-
</div>
120
-
);
121
-
}
122
-
```
34
+
_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/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+first+issue%22) or reach out on our [Discord](https://discord.gg/SNusEyNGsx)_
123
35
124
-
For a deeper look at the Mitosis JSX syntax, check out [our Component docs](/docs/components.md) and overall [Mitosis Documentation](/docs/README.md).
36
+
## Quickstart
125
37
126
-
### Build
38
+
To create a new Mitosis project from scratch, run the following `create` command:
127
39
128
40
```bash
129
-
npm execmitosis build
41
+
npm create @builder.io/mitosis@latest
130
42
```
131
43
132
-
🎉 You should now have an `output` directory with your compiled components in all frameworks!
133
-
134
-
### Recommended: Install ESLint Rules
135
-
136
-
We recommend you install our [ESLint plugin](./packages/eslint-plugin) to have highly useful rules that guide you as you build your Mitosis components.
137
-
138
-
### Next up
139
-
140
-
Our recommended next steps are to:
141
-
142
-
- add a build step for each generated output (e.g. a Svelte library will need to be build using Sveltekit's [`svelte-package`](https://kit.svelte.dev/docs/packaging) command)
143
-
- add a `test-servers/` folder containing web apps that import your outputs, so that you can test them (either manually or programatically).
144
-
145
-
## Examples
146
-
147
-
Here are some helpful resources on trying out Mitosis:
148
-
149
-
-[CKGrafico/papanasi](https://github.com/CKGrafico/papanasi): A framework-agnostic UI library built in Mitosis
150
-
- Our [example project](./examples/basic/) is a good starting point for learning how to use Mitosis.
151
-
- blog post on creating a Mitosis project: https://blog.logrocket.com/creating-reusable-components-mitosis-builder-io/
152
-
153
-
## What is Mitosis?
154
-
155
-
-[this talk](https://portal.gitnation.org/contents/its-time-to-de-fragment-the-web) 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.
156
-
157
-
- The below video is a brief introduction by Steve Sewell.
Curious about how Mitosis code works under the hood, and how to use it? Learn more [in our in-depth docs](docs/).
163
-
164
-
## Why use Mitosis?
165
-
166
-
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:
167
-
168
-
### Design Systems Maintainers
169
-
170
-
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](https://chakra-ui.com/), and how the maintainers have decided to create [Zag.js](https://zagjs.com/overview/introduction#motivation) 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!)
171
-
172
-
### Teams using multiple web frameworks
173
-
174
-
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.
175
-
176
-
### Teams building web SDKs
177
-
178
-
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](https://github.com/BuilderIO/builder/tree/main/packages/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 😉
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.
187
45
188
-
<imgalt="XKCD comic about solving too many standards by creating new standards just making yet another standard"src="https://user-images.githubusercontent.com/844291/168342803-5599952e-a400-4918-851d-5af93dc19585.png"width="500">
46
+
Read the full [getting started docs](https://mitosis.builder.io/docs/quickstart/) for more.
189
47
190
-
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](https://en.wikipedia.org/wiki/LLVM). A toolchain that embraces that there are, and forever will be, many ways of writing components. Mitosis defines a common [intermediate representation](https://en.wikipedia.org/wiki/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](https://en.wikipedia.org/wiki/Instruction_set_architecture). If you look at Mitosis this way, you may more clearly see the value.
48
+
## Resources
191
49
192
-
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](https://github.com/builderio/builder) 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.
_NOTE: this matrix is programmatically generated and should not be manually edited._
208
69
@@ -212,18 +73,6 @@ Interested in contribute? Head over to the [developer](developer/) docs and see
212
73
213
74
Once you're ready, checkout our [issues](https://github.com/BuilderIO/mitosis/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) page and grab your first issue!
214
75
215
-
## Community
216
-
217
-
-[Mitosis Discord](https://discord.gg/SNusEyNGsx)
218
-
-[@Builderio](https://twitter.com/builderio)
219
-
220
-
## Related Projects
221
-
222
-
-[Figma plugin](https://github.com/BuilderIO/figma-html): Convert Figma designs into high quality HTML, React, Vue, Svelte, Angular, Solid, etc code via Mitosis.
223
-
-[Builder](https://github.com/BuilderIO): Drag and drop page builder and CMS for React, Vue, Angular, and more.
224
-
-[Qwik](https://github.com/BuilderIO/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.
225
-
-[Partytown](https://github.com/BuilderIO/partytown): Relocate resource intensive third-party scripts off of the main thread and into a web worker. 🎉
Copy file name to clipboardexpand all lines: developer/README.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -9,7 +9,7 @@ live under `packages/` and `examples/`:
9
9
10
10
-`core` (`@builder.io/mitosis`): contains the Mitosis engine
11
11
-`cli` (`@builder.io/mitosis-cli`): contains the Mitosis CLI, and _depends_ on `core`
12
-
-`fiddle`: contains the code for the interactive Mitosis fiddle, which is hosted at mitosis.builder.io
12
+
-`site`: contains the Mitosis site hosted at mitosis.builder.io
13
13
-`eslint-plugin` (`@builder.io/eslint-plugin-mitosis`): contains the Mitosis eslint rules to enforce valid Mitosis component syntax. Yet to be released.
14
14
15
15
## Installation
@@ -32,7 +32,7 @@ We need your help! If you found a bug, it's best to [create an issue](https://gi
32
32
33
33
## Developing for Core & Testing
34
34
35
-
In `core`, we use vitest snapshots & integeration tests for test coverage. If you are solving a problem that is reproducible by a fiddle in [mitosis.builder.io](https://mitosis.builder.io), we highly recommend the following flow:
35
+
In `core`, we use vitest snapshots & integeration tests for test coverage. If you are solving a problem that is reproducible by a fiddle in [mitosis.builder.io/playground](/playground), we highly recommend the following flow:
Mitosis is a subset of [JSX](https://github.com/facebook/jsx). It supports generating code for a number of frontend frameworks, including React, Vue, Angular, Svelte, and Solid.
4
-
5
-
**Table of contents**
6
-
7
-
-[How Does It Work](#how-does-it-work)
8
-
-[Formatting options](#formatting-options)
9
-
-[Project Structure](./project-structure.md)
10
-
-[Components](./components.md)
11
-
-[Context](./context.md)
12
-
-[Hooks](./hooks.md)
13
-
-[Gotchas](./gotchas.md)
14
-
-[Customizability](./customizability.md)
15
-
-[Configuration](./configuration.md)
16
-
-[CLI](./cli.md)
17
-
18
-
## How does it work
19
-
20
-
Mitosis uses a static subset of JSX, inspired by [Solid](https://www.solidjs.com/guide#jsx-compilation). This means we can parse it to a simple JSON structure, then easily build serializers that target various frameworks and implementations.
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:
Adding framework support is surprisingly easy with the plugin system (docs coming soon).
79
-
80
-
## Formatting options
81
-
82
-
Mitosis supports settings for generating code to match your preferred formatting, libraries, etc. These output options will be customizable and extensible with plugins soon.
83
-
84
-
<imgsrc="https://imgur.com/hWXfNF3.gif "/>
1
+
Docs have moved to [mitosis.builder.io](https://mitosis.builder.io/docs)
0 commit comments