Welcome to our new site! Please share feedback
Mitosis logo
OverviewQuickstartComponentsHooksContextFigmaUsing LibrariesCustomizationConfigurationProject StructureCLIGotchas

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

  1. 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.

  2. 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={(e) => (state.name = e.target.value)}
        placeholder="Your name"
      />
      <div>Hello, {state.name}!</div>
    </div>
  );
}
  1. 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:

  1. Export the components

    Export the Greet component from the library/src/index.ts file:

    export { default as Greet } from './greet/greet.lite';

  2. Build the library

    From the library/packages/svelte folder, build the Svelte components by running the following command:

    npm run build:watch

  3. 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>

  4. Start the dev server

    Start the development server for your Svelte app with the following command:

    npm run dev

  5. 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