import { useState, Show, For } from '@builder.io/mitosis';
export default function MyComponent(props) {
const state = useState({
newItemName: 'New item',
list: ['hello', 'world'],
addItem() {
state.list = [...state.list, state.newItemName];
},
});
return (
<div>
<Show when={props.showInput}>
<input
value={state.newItemName}
onChange={(event) => (state.newItemName = event.target.value)}
/>
</Show>
<div css={{ padding: '10px' }}>
<button onClick={() => state.addItem()}>Add list item</button>
<div>
<For each={state.list}>{(item) => <div>{item}</div>}</For>
</div>
</div>
</div>
);
}
npm install -g @builder.io/mitosis-cli
mitosis compile --to=vue my-file.lite.jsx
Why
export function MyComponent() {
const state = useState({
name: 'Steve',
});
return (
<div>
<input
value={state.name}
onChange={(event) => (state.name = event.target.value)}
/>
</div>
);
}
{
"@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"
}
}
]
}
]
}
@Component({
template: `
<div>
<input [value]="name" (change)="name = $event.target.value" />
</div>
`,
})
class MyComponent {
name = 'Steve';
}
Use our Figma plugin to turn designs into code!
|
Try our interactive fiddle
|
Try our VS Code extension for in-IDE visual coding
|
Try our Shopify app for visual Shopify store building
|
Try our headless CMS for no-code APIs for all sites and apps
|
View our upcoming ecommerce integrations
|
Framework | Status |
---|---|
React | Alpha |
Vue | Alpha |
Liquid | Alpha |
Builder.io | Alpha |
Solid | Alpha |
Figma | Alpha |
Angular | Alpha |
Svelte | Alpha |
HTML/CSS/JS | Alpha |
Webcomponents | Alpha |
React Native | Alpha |
SwiftUI | Experimental |