Mitosis Import Plugin

[arthur-fontaine]

Hi! 👋

Today I built an Esbuild plugin that lets you import Mitosis components without needing create a library folder/package.

• GitHub: https://github.com/arthur-fontaine/mitosis-import-plugin/
• NPM: https://www.npmjs.com/package/mitosis-import-plugin

The goal was to make Mitosis feel more "native" and "fluent" within the framework I use, while still benefiting from its ability to decouple UI from any specific framework.

The plugin can auto-detect the framework used (without needing to specify the target in the import attribute) and detect when an import is a Mitosis component automatically. Those two features together allows to import a Mitosis component as any other component.

In fact, that was my original motivation when I built Kazam – a tool similar to Mitosis – which I created around the same time Mitosis came out.

Currently, the plugin only works with Esbuild since it's the easiest build tool to use import attributes with (which the plugin relies on). But as soon as other build tools support them I will add compatibility (it should only take a few lines of code).

In the future, I want to

• auto-detect the framework used (without needing to specify the target in the import attribute) (done ✅)
• add support for more build tools (especially Vite, Rspack, and maybe Metro if possible)
• (maybe) detect when an import is a Mitosis component automatically (done ✅)

Here is a demo video!

Enregistrement.de.l.ecran.2025-05-17.a.21.24.13.mov

You can see how to use it on the GitHub.

Resources:

• GitHub: https://github.com/arthur-fontaine/mitosis-import-plugin/ (please leave a star ⭐ if you think it deserves it)
• NPM: https://www.npmjs.com/package/mitosis-import-plugin