MITOSIS : écrivez vos composants une fois, compilez-les pour tous les frameworks
📌 MITOSIS est un compilateur open source de Builder.io. Vous écrivez un composant une seule fois, dans une syntaxe proche de JSX, et il le transforme en code natif React, Vue, Angular, Svelte, Solid, Qwik ou Alpine. Pas de runtime maquillé, pas de couche de compatibilité : à chaque framework, Mitosis livre du vrai code idiomatique.
Le problème est vieux comme le web moderne : vous construisez un design system dans un framework, puis on vous demande une version Vue, une version Angular, une version Svelte. Vous vous retrouvez à maintenir trois dépôts en parallèle et à corriger le même bug dans trois langages différents. Mitosis attaque la cause racine au lieu d’empiler des couches d’abstraction : il parse votre code source, construit une représentation intermédiaire, puis génère le code ciblé pour chaque plateforme. Votre source unique reste la vérité, la compilation fait le reste.
Ce qui distingue vraiment le projet, c’est qu’il ne vous enferme pas dans un méta-framework. Vous n’envoyez pas un runtime qui interprète vos composants côté utilisateur : vous envoyez du React aux utilisateurs de React, du Vue aux utilisateurs de Vue. C’est aussi un moyen d’éviter le piège des web components, avec leurs quirks d’encapsulation de style et leur shadow DOM. Le README cite un cas réel : db-ux-design-system maintenance un design system cohérent sur plusieurs frameworks grâce à Mitosis. Ce n’est pas un projet jouet.
Le cas d’usage le plus parlant reste Figma vers code. L’intégration directe avec Figma permet de générer les composants depuis vos maquettes, puis de les publier sur npm pour chaque framework supporté. Un travail qui demanderait normalement une armée de développeurs à reconvertir manuellement chaque variante devient une étape de compilation. Ça ne remplace pas vos ingénieurs frontend, mais leur épargne la partie la plus répétitive.
Une réserve honnête : ce n’est pas de la magie. Il faut encore comprendre les frameworks cibles pour déboguer les cas limites et les différences de comportement. Le projet est sous licence MIT, tourne autour de 14 000 étoiles sur GitHub, et cherche ouvertement des contributeurs, avec une liste de good first issues et un Discord actif — bon signe pour sa pérennité.
Je trouve l’approche plus saine que les solutions qui ajoutent une couche d’abstraction supplémentaire à maintenir. Pour une petite équipe qui livre des composants vers plusieurs frameworks, ou une organisation dont le design system doit vivre partout, la combinaison compilation multi-frameworks et Figma a de quoi convaincre. Pour tester : npm create @builder.io/mitosis@latest scaffolde un projet complet, et un playground sur le site montre en direct le code source et ses sorties compilées.
Points clés :
- 🧩 Un composant écrit une fois, compilé en React, Vue, Angular, Svelte, Solid, Qwik…
- ⚡ Sortie en code natif, sans runtime ni shim de compatibilité
- 🎨 Synchronisation Figma vers code, publication sur npm multi-frameworks
- 🚫 Évite le piège des web components (shadow DOM, encapsulation de style)
- 🤝 Projet MIT, ~14 000 étoiles, recherche de contributeurs
Sources :
