0.5.16 • Published 2 months ago

@builder.io/mitosis v0.5.16

Weekly downloads
-
License
MIT
Repository
github
Last release
2 months ago

Why

Component libraries

Managing support for libraries that provide UI components across frameworks is a pain, esp when webcomponents are not an option (e.g. for server side rendering, best performance, etc). With Mitosis you can write once, and run everywhere with full compatibilty

Modern workflows for all platforms

JSX lite allows you to incrementally adopt modern and familiar workflows for many different platforms, for for Shopify instance you can server side render to liquid and hydrate with React

JS framework fatigue

If you have ever had to migrate a huge codebase from one framework to another, it's an absolute nightmare. Writing at a higher level of abstraction allows you to move from one to another with ease

Design to code

With JSX lite, you can convert designs from Figma or Sketch and convert it to clean code for the framework of your choice. You can even use Builder.io to visually drag/drop to build UIs and edit the code side by side

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 that it is easy easy to build stringifers off of for various frameworks and implementations

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

  return (
    <div>
      <input
        value={state.name}
        onChange={(e) => (state.name = e.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",
          "bindings": {
            "value": "state.name",
            "onChange": "state.name = event.target.value"
          }
        }
      ]
    }
  ]
}

Which can be reserialized into many languges and framworks. For instance, 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 our plugins (docs coming soon!)

No-code tooling

Mitosis's static JSON format also enables no-code tooling for visual code editing and importing, for instance with Builder.io or Figma

Formatting options

Mitosis supports settings for generating code to match your preferred formatting, libraries, etc. These output options will be customizable and extensible with plugins soon too

Who uses it

Status

FrameworkStatus
ReactAlpha
VueAlpha
LiquidAlpha
Builder.ioAlpha
SolidAlpha
FigmaAlpha
AngularAlpha
SvelteAlpha
HTML/CSS/JSAlpha
WebcomponentsAlpha
React NativeAlpha
SwiftUIExperimental

Coming soon

  • Stable (v1) release
  • Plugin API docs for custom syntaxes and extensions
  • VS code plugin
0.5.16

2 months ago

0.5.10

2 months ago

0.5.11

2 months ago

0.5.14

2 months ago

0.5.15

2 months ago

0.5.12

2 months ago

0.5.13

2 months ago

0.5.8

2 months ago

0.5.9

2 months ago

0.5.7

2 months ago

0.5.6

2 months ago

0.5.5

2 months ago

0.5.4

2 months ago

0.5.3

2 months ago

0.5.0

3 months ago

0.5.2

3 months ago

0.5.1

3 months ago

0.4.5

3 months ago

0.4.7

3 months ago

0.4.6

3 months ago

0.4.4

3 months ago

0.4.1

4 months ago

0.4.3

4 months ago

0.4.2

4 months ago

0.3.6

6 months ago

0.3.5

7 months ago

0.3.8

6 months ago

0.3.7

6 months ago

0.3.2

7 months ago

0.3.1

7 months ago

0.3.4

7 months ago

0.3.3

7 months ago

0.4.0

4 months ago

0.3.20

5 months ago

0.3.22

5 months ago

0.3.21

5 months ago

0.3.19

5 months ago

0.3.18

5 months ago

0.3.9

6 months ago

0.3.17

5 months ago

0.3.16

5 months ago

0.3.15

5 months ago

0.3.14

5 months ago

0.3.13

5 months ago

0.3.12

5 months ago

0.3.11

5 months ago

0.3.10

6 months ago

0.3.0

8 months ago

0.2.10

8 months ago

0.2.9

8 months ago

0.2.8

8 months ago

0.2.7

8 months ago

0.2.6

8 months ago

0.2.5

8 months ago

0.2.4

8 months ago

0.2.3

8 months ago

0.2.2

8 months ago

0.2.1

8 months ago

0.2.0

8 months ago

0.1.7

9 months ago

0.1.6

9 months ago

0.1.5

10 months ago

0.1.4

10 months ago

0.1.2

10 months ago

0.1.3

10 months ago

0.1.1

10 months ago

0.1.0

10 months ago

0.0.147

10 months ago

0.0.146

11 months ago

0.0.145

11 months ago

0.0.144

11 months ago

0.0.142

11 months ago

0.0.139

12 months ago

0.0.138

12 months ago

0.0.141

12 months ago

0.0.140

12 months ago

0.0.137

1 year ago

0.0.136

1 year ago

0.0.135

1 year ago

0.0.111-0

1 year ago

0.0.109

1 year ago

0.0.108

1 year ago

0.0.107

1 year ago

0.0.121-0

1 year ago

0.0.117-0

1 year ago

0.0.119-1

1 year ago

0.0.119-0

1 year ago

0.0.107-4

1 year ago

0.0.115-1

1 year ago

0.0.115-0

1 year ago

0.0.115-3

1 year ago

0.0.115-2

1 year ago

0.0.120-1

1 year ago

0.0.120-0

1 year ago

0.0.120-2

1 year ago

0.0.117

1 year ago

0.0.116

1 year ago

0.0.115

1 year ago

0.0.114

1 year ago

0.0.119

1 year ago

0.0.118

1 year ago

0.0.113

1 year ago

0.0.112

1 year ago

0.0.111

1 year ago

0.0.110

1 year ago

0.0.128

1 year ago

0.0.127

1 year ago

0.0.126

1 year ago

0.0.125

1 year ago

0.0.129

1 year ago

0.0.120

1 year ago

0.0.124

1 year ago

0.0.123

1 year ago

0.0.122

1 year ago

0.0.121

1 year ago

0.0.115-5

1 year ago

0.0.115-4

1 year ago

0.0.115-7

1 year ago

0.0.115-6

1 year ago

0.0.115-8

1 year ago

0.0.131

1 year ago

0.0.130

1 year ago

0.0.134

1 year ago

0.0.133

1 year ago

0.0.132

1 year ago

0.0.107-0

1 year ago

0.0.107-2

1 year ago

0.0.107-1

1 year ago

0.0.107-3

1 year ago

0.0.106

2 years ago

0.0.105

2 years ago

0.0.104

2 years ago

0.0.103

2 years ago

0.0.102

2 years ago

0.0.101

2 years ago

0.0.100

2 years ago

0.0.104-0

2 years ago

0.0.98-0

2 years ago

0.0.97

2 years ago

0.0.98

2 years ago

0.0.99

2 years ago

0.0.97-0

2 years ago

0.0.95

2 years ago

0.0.96

2 years ago

0.0.91

2 years ago

0.0.92

2 years ago

0.0.93

2 years ago

0.0.94

2 years ago

0.0.84

2 years ago

0.0.85

2 years ago

0.0.86

2 years ago

0.0.87

2 years ago

0.0.88

2 years ago

0.0.89

2 years ago

0.0.90

2 years ago

0.0.80

2 years ago

0.0.81

2 years ago

0.0.82

2 years ago

0.0.83

2 years ago

0.0.73

2 years ago

0.0.77-0

2 years ago

0.0.74

2 years ago

0.0.75

2 years ago

0.0.76

2 years ago

0.0.77

2 years ago

0.0.78

2 years ago

0.0.79

2 years ago

0.0.70

2 years ago

0.0.71

2 years ago

0.0.72

2 years ago

0.0.65

2 years ago

0.0.66

2 years ago

0.0.67

2 years ago

0.0.68

2 years ago

0.0.69

2 years ago

0.0.72-4

2 years ago

0.0.72-5

2 years ago

0.0.72-2

2 years ago

0.0.72-3

2 years ago

0.0.72-0

2 years ago

0.0.72-1

2 years ago

0.0.62

2 years ago

0.0.63

2 years ago

0.0.64

2 years ago

0.0.60

2 years ago

0.0.61

2 years ago

0.0.59

2 years ago

0.0.56

2 years ago

0.0.57

2 years ago

0.0.58

2 years ago

0.0.56-107

2 years ago

0.0.56-108

2 years ago

0.0.56-109

2 years ago

0.0.56-100

2 years ago

0.0.56-101

2 years ago

0.0.56-102

2 years ago

0.0.56-103

2 years ago

0.0.56-104

2 years ago

0.0.56-105

2 years ago

0.0.56-106

2 years ago

0.0.56-86

2 years ago

0.0.56-87

2 years ago

0.0.56-84

2 years ago

0.0.56-85

2 years ago

0.0.56-82

2 years ago

0.0.56-83

2 years ago

0.0.56-81

2 years ago

0.0.56-88

2 years ago

0.0.56-89

2 years ago

0.0.56-110

2 years ago

0.0.56-111

2 years ago

0.0.56-90

2 years ago

0.0.61-0

2 years ago

0.0.56-97

2 years ago

0.0.56-98

2 years ago

0.0.56-95

2 years ago

0.0.56-96

2 years ago

0.0.56-93

2 years ago

0.0.56-94

2 years ago

0.0.56-91

2 years ago

0.0.56-92

2 years ago

0.0.56-99

2 years ago

0.0.56-31

2 years ago

0.0.56-32

2 years ago

0.0.56-30

2 years ago

0.0.56-39

2 years ago

0.0.56-37

2 years ago

0.0.56-38

2 years ago

0.0.56-35

2 years ago

0.0.56-36

2 years ago

0.0.56-34

2 years ago

0.0.56-42

2 years ago

0.0.56-43

2 years ago

0.0.56-40

2 years ago

0.0.56-41

2 years ago

0.0.56-48

2 years ago

0.0.56-49

2 years ago

0.0.56-46

2 years ago

0.0.56-47

2 years ago

0.0.56-45

2 years ago

0.0.56-53

2 years ago

0.0.56-54

2 years ago

0.0.56-51

2 years ago

0.0.56-52

2 years ago

0.0.56-50

2 years ago

0.0.56-59

2 years ago

0.0.56-57

2 years ago

0.0.56-58

2 years ago

0.0.56-55

2 years ago

0.0.56-56

2 years ago

0.0.56-64

2 years ago

0.0.56-62

2 years ago

0.0.56-63

2 years ago

0.0.56-60

2 years ago

0.0.56-61

2 years ago

0.0.56-68

2 years ago

0.0.56-69

2 years ago

0.0.56-66

2 years ago

0.0.56-67

2 years ago

0.0.56-75

2 years ago

0.0.56-76

2 years ago

0.0.56-73

2 years ago

0.0.56-74

2 years ago

0.0.56-71

2 years ago

0.0.56-72

2 years ago

0.0.56-70

2 years ago

0.0.56-79

2 years ago

0.0.56-77

2 years ago

0.0.56-78

2 years ago

0.0.56-80

2 years ago

0.0.56-17

2 years ago

0.0.56-18

2 years ago

0.0.56-15

3 years ago

0.0.56-16

2 years ago

0.0.56-13

3 years ago

0.0.56-14

3 years ago

0.0.56-12

3 years ago

0.0.56-19

2 years ago

0.0.56-20

2 years ago

0.0.56-21

2 years ago

0.0.56-28

2 years ago

0.0.56-29

2 years ago

0.0.56-26

2 years ago

0.0.56-27

2 years ago

0.0.56-24

2 years ago

0.0.56-25

2 years ago

0.0.56-22

2 years ago

0.0.56-23

2 years ago

0.0.56-10

3 years ago

0.0.56-11

3 years ago

0.0.56-9

3 years ago

0.0.56-8

3 years ago

0.0.56-7

3 years ago

0.0.56-6

3 years ago

0.0.56-5

3 years ago

0.0.56-4

3 years ago

0.0.56-3

3 years ago

0.0.56-2

3 years ago

0.0.56-1

3 years ago

0.0.56-0

3 years ago

0.0.51

3 years ago

0.0.54

3 years ago

0.0.55

3 years ago

0.0.50

3 years ago

0.0.50-8

3 years ago

0.0.50-7

3 years ago

0.0.50-6

3 years ago

0.0.50-5

3 years ago

0.0.50-3

3 years ago

0.0.50-2

3 years ago

0.0.50-1

3 years ago

0.0.50-0

3 years ago

0.0.45

3 years ago

0.0.46

3 years ago

0.0.47

3 years ago

0.0.48

3 years ago

0.0.49

3 years ago

0.0.45-5

3 years ago

0.0.45-4

3 years ago

0.0.45-3

3 years ago

0.0.45-2

3 years ago

0.0.45-1

3 years ago

0.0.45-0

3 years ago

0.0.44

3 years ago

0.0.1-mono.3

3 years ago

0.0.44-21

3 years ago

0.0.44-20

3 years ago

0.0.44-19

3 years ago

0.0.44-18

3 years ago