Repolode
Enviar
BuilderIO

BuilderIO/mitosis

Escribe componentes de UI una sola vez con una sintaxis similar a JSX y compílalos para React, Vue, Angular, Svelte, Solid, Qwik y más.

Ver en GitHubSitio web
Estrellas
14,445
Forks
679
Issues abiertos
177
Último commit
hace 22 días

¿Qué es?

Mitosis es un compilador que permite escribir componentes de UI en una sola base de código y generar código nativo para varios frameworks. Los componentes se escriben en un formato similar a JSX y se compilan para React, Vue, Angular, Svelte, Solid, Alpine, Qwik y otros destinos, para que los equipos puedan mantener una única fuente de verdad en lugar de gestionar implementaciones paralelas.

Sus principales casos de uso son mantener un sistema de diseño que debe distribuirse en varios frameworks y publicar esos componentes en npm para cada framework. El proyecto también ofrece una integración con Figma para sincronizar componentes del sistema de diseño desde Figma con el código de Mitosis. La compilación a código nativo de cada framework se plantea como una alternativa a los web components.

El proyecto ofrece una CLI para crear la estructura inicial de proyectos con npm create, además de documentación y un playground en línea para probar el compilador.

Funciones clave

  • 01Compila el código fuente de un componente para React, Vue, Angular, Svelte, Solid, Alpine y Qwik.
  • 02Permite escribir los componentes en un formato similar a JSX.
  • 03Se integra con Figma para sincronizar componentes del sistema de diseño con el código.
  • 04Genera código nativo para cada framework en lugar de web components.
  • 05Incluye un playground en línea y herramientas para empezar.

Casos de uso

  • Mantener un sistema de diseño que usan equipos con distintos frameworks.
  • Publicar una biblioteca de componentes en npm con compilaciones para varios frameworks.
  • Generar código de componentes a partir de diseños de Figma para varias tecnologías de front-end.

Inicio rápido

  1. 1

    Crea un nuevo proyecto de Mitosis con el comando create

    npm create @builder.io/mitosis@latest
  2. 2

    Lee el README generado en tu nuevo proyecto para saber cómo compilar y probar componentes

Antes de usarlo

  • Mitosis es un compilador, por lo que puede que tengas que ajustar manualmente el código generado para adaptarlo a las necesidades específicas del framework.

Temas

#compiler#components#design-system#react#vue#angular#svelte#figma#builder#declarative

Preguntas frecuentes

¿Qué es mitosis?
Escribe componentes de UI una sola vez con una sintaxis similar a JSX y compílalos para React, Vue, Angular, Svelte, Solid, Qwik y más. Mitosis es un compilador que permite escribir componentes de UI en una sola base de código y generar código nativo para varios frameworks. Los componentes se escriben en un formato similar a JSX y se compilan para React, Vue, Angular, Svelte, Solid, Alpine, Qwik y otros destinos, para que los equipos puedan mantener una única fuente de verdad en lugar de gestionar implementaciones paralelas.
¿mitosis es gratuito? ¿Qué licencia tiene?
mitosis es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿mitosis sigue mantenido?
Mantenimiento activo. El último commit de mitosis fue el 29 sept 2026.
¿Para qué puedo usar mitosis?
Mantener un sistema de diseño que usan equipos con distintos frameworks. Publicar una biblioteca de componentes en npm con compilaciones para varios frameworks. Generar código de componentes a partir de diseños de Figma para varias tecnologías de front-end.
¿Cómo se instala mitosis?
Crea un nuevo proyecto de Mitosis con el comando create: npm create @builder.io/mitosis@latest Lee el README generado en tu nuevo proyecto para saber cómo compilar y probar componentes
¿Dónde consigo mitosis?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/BuilderIO/mitosis

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados