Quickstart
Create a new project
Start a new Mitosis project by running the following command in your terminal:
npm
create @builder.io/mitosis@latest
When prompted, enter a project name and select your desired output. Currently, we support outputs for React, Svelte, and Qwik. After making your selection, navigate to the project folder and install the dependencies.
Explore the project structure
Focus on the
library
folder within your project. In
library/src
, you will find:
- An
autocomplete
component
- A
todo-app
component
Each component is housed in its own folder and written in a
.lite.tsx
file, the standard file format for Mitosis components. Also, explore the
library/packages
folder, which contains starter code for the outputs you selected during setup.
Run the project
-
Start the development server
From within the
library
folder, run the following command to start the development server:
npm run start
This command automatically generates component code in the corresponding output folder. You write code once, and it gets converted into React, Qwik, and Svelte code.
-
Add a new component
Create a
library/src/greet.lite.tsx
file with the following code:
import
{
useStore
}
from
'@builder.io/mitosis'
;
export
default
function
Greet
(
)
{
const
state
=
useStore
(
{
name
:
''
,
}
)
;
return
(
<
div
>
<
input
value
=
{
state
.
name
}
onChange
=
{
(
event
)
=>
(
state
.
name
=
event
.
target
.
value
)
}
placeholder
=
"
Your name
"
/>
<
div
>
Hello,
{
state
.
name
}
!
</
div
>
</
div
>
)
;
}
- Configure project settings
In the root of your project, add a
mitosis.config.js
file to specify the target output. Possible targets include Alpine, Angular, customElement, HTML, Mitosis, Liquid, React, React Native, Solid, Svelte, Swift, Template, Webcomponent, Vue (version 3), Stencil, Qwik, Marko, Preact, Lit, and RSC.
By following these steps, you'll be well on your way to developing with Mitosis, taking advantage of its capability to write once and deploy to multiple frameworks.
See our
CLI documentation
for more commands you can run for developing and building.
Verify your components
After generating the component code with Mitosis, the next step is to ensure that your components work as expected. Here's how to verify them using Svelte as the target framework:
-
Export the components
Export the
Greet
component from the
library/src/index.ts
file:
export
{
default
as
Greet
}
from
'./greet.lite'
;
-
Build the library
From the
library/packages/svelte
folder, build the Svelte components by running the following command:
npm
run build:watch
-
Test in a an application
We'll use Svelte for this example, but these same steps work for any other output frameworks.
-
Navigate to the
test-apps/svelte
folder:
cd
test-apps/svelte
-
Open the
src/routes/+page.svelte
file and import the component:
<
script
lang
=
"
ts
"
>
import { AutoComplete, Todos, Greet } from '@demo-one/library-svelte';
</
script
>
<
h1
>
Welcome to SvelteKit
</
h1
>
<
AutoComplete
/>
<
Todos
/>
<
Greet
/>
<
p
>
Visit
<
a
href
=
"
https://kit.svelte.dev
"
>
kit.svelte.dev
</
a
>
to read the documentation
</
p
>
-
Start the dev server
Start the development server for your Svelte app with the following command:
npm
run dev
-
Verify the component
Open
http://localhost:5173
in your browser. You should see the functioning Greet component along with the other components.
By following these steps, you'll be well on your way to developing with Mitosis, taking advantage of its capability to write once and deploy to multiple frameworks.
Next steps
