Repolode
Enviar
BuilderIO

BuilderIO/mitosis

Escreva componentes de UI uma única vez em uma sintaxe parecida com JSX e compile para React, Vue, Angular, Svelte, Solid, Qwik e outros.

Ver no GitHubSite
Estrelas
14,445
Forks
679
Issues abertas
177
Último commit
há 22 dias

O que é?

Mitosis é um compilador para escrever componentes de UI em uma única base de código e gerar código nativo para vários frameworks. Os componentes são criados em um formato parecido com JSX e compilados para React, Vue, Angular, Svelte, Solid, Alpine, Qwik e outros destinos, permitindo que as equipes mantenham uma única fonte de verdade em vez de manter implementações paralelas.

Os principais casos de uso são manter um design system que precisa ser distribuído em vários frameworks e publicar esses componentes no npm para cada framework. O projeto também oferece uma integração com Figma para sincronizar componentes do design system do Figma para o código do Mitosis. A compilação para código nativo dos frameworks é apresentada como uma alternativa aos web components.

O projeto oferece uma CLI para criar a estrutura de novos projetos com npm create, além de documentação e um playground online para testar o compilador.

Recursos principais

  • 01Compila o código-fonte de um componente para React, Vue, Angular, Svelte, Solid, Alpine e Qwik.
  • 02Usa um formato de criação parecido com JSX.
  • 03Integra-se ao Figma para sincronizar componentes do design system com o código.
  • 04Gera código nativo dos frameworks em vez de web components.
  • 05Inclui um playground online e ferramentas para começar.

Casos de uso

  • Manter um design system usado por equipes que trabalham com diferentes frameworks.
  • Publicar uma biblioteca de componentes no npm com builds para vários frameworks.
  • Gerar código de componentes a partir de designs do Figma para diferentes stacks de front-end.

Início rápido

  1. 1

    Crie um novo projeto Mitosis com o comando create

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

    Leia o README gerado no seu novo projeto para saber como compilar e testar componentes

Antes de usar

  • Mitosis é um compilador, então talvez seja necessário ajustar manualmente o código gerado para atender às necessidades específicas do framework.

Tópicos

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

Perguntas frequentes

O que é mitosis?
Escreva componentes de UI uma única vez em uma sintaxe parecida com JSX e compile para React, Vue, Angular, Svelte, Solid, Qwik e outros. Mitosis é um compilador para escrever componentes de UI em uma única base de código e gerar código nativo para vários frameworks. Os componentes são criados em um formato parecido com JSX e compilados para React, Vue, Angular, Svelte, Solid, Alpine, Qwik e outros destinos, permitindo que as equipes mantenham uma única fonte de verdade em vez de manter implementações paralelas.
mitosis é gratuito? Qual é a licença?
mitosis é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
mitosis ainda é mantido?
Manutenção ativa. O último commit de mitosis foi em 29 de set. de 2026.
Para que posso usar mitosis?
Manter um design system usado por equipes que trabalham com diferentes frameworks. Publicar uma biblioteca de componentes no npm com builds para vários frameworks. Gerar código de componentes a partir de designs do Figma para diferentes stacks de front-end.
Como instalar mitosis?
Crie um novo projeto Mitosis com o comando create: npm create @builder.io/mitosis@latest Leia o README gerado no seu novo projeto para saber como compilar e testar componentes
Onde consigo mitosis?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/BuilderIO/mitosis

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados