Welcome to our new site! Please share feedback

Using Libraries

JavaScript libraries

You can use any JavaScript library in your Mitosis components just like you would in any other framework. Here's an example of using lodash in a Mitosis component:

import { kebabCase } from 'lodash';

export default function MyComponent(props: { name: string }) {
  return <div>{kebabCase(props.name)}</div>;

Framework-specific libraries

Because of the cross-framework nature of Mitosis, you cannot use framework-specific libraries direclty in Mitosis code.

For instance a React form library wouldn't make sense in the context of Mitosis, because Mitosis components are framework-agnostic, so how would it work with Vue or Svelte?

Focus on web fundamentals

The web platform has come a long way, and you may not need as many libraries as you think.

For example, for form handling, instead of using a library you can use the native form element and its built-in validation:

export default function MyComponent() {
  function handleSubmit(event: SubmitEvent) {

    const form = event.target as HTMLFormElement;
    if (!form.checkValidity()) {
      alert('Form is invalid');
    const data = new FormData(form);
    const email = data.get('email');

  return (
    <form onSubmit={(event) => handleSubmit(event)}>
      <input type="email" name="email" required />
      <button type="submit">Submit</button>

Use overrides (sparringly)

If you really need to use a framework-specific library, you can use overrides to provide different implementations for different frameworks.

In the overrides/ directory of a Mitosis project, you can create a file for each you want to override.

For example, if you have a file in src/components/foo.lite.tsx and you need a specific implemtnation for Angular, for instance to use a specific library or unique feature, you can create a file overrides/angular/src/components.foo.ts and provide the Angular-specific implementation.

See examples in the overrides directory of the builder.io SDK.