BuilderIO/mitosis

これは何？

主な機能

• 011つのコンポーネントソースをReact、Vue、Angular、Svelte、Solid、Alpine、Qwik向けにコンパイルできます。
• 02JSX風の記述形式を使用します。
• 03Figmaと連携し、デザインシステムのコンポーネントをコードに同期できます。
• 04Web Componentsではなく、ネイティブなフレームワークコードを生成します。
• 05オンラインプレイグラウンドと、利用開始に役立つツールを提供します。

ユースケース

• 異なるフレームワークを使うチームが利用するデザインシステムの保守。
• 複数のフレームワーク向けビルドを含むコンポーネントライブラリのnpm公開。
• Figmaのデザインから、複数のフロントエンドスタック向けにコンポーネントコードを生成。

クイックスタート

1. 1

   create コマンドで新しい Mitosis プロジェクトを作成します

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

   新しいプロジェクトで生成された README を読み、コンポーネントのビルドとテストの方法を確認します

使う前に知っておきたいこと

• !Mitosis はコンパイラーであるため、フレームワーク固有の要件に合わせて生成コードを手動で調整する必要がある場合があります。

トピック

よくある質問

mitosis とは？

JSX風の構文でUIコンポーネントを一度書き、React、Vue、Angular、Svelte、Solid、Qwikなど向けにコンパイルできます。 Mitosisは、UIコンポーネントを単一のコードベースで記述し、複数のフレームワーク向けにネイティブコードを生成するコンパイラーです。コンポーネントはJSX風の形式で記述し、React、Vue、Angular、Svelte、Solid、Alpine、Qwikなどをターゲットとしてコンパイルできます。これにより、チームは実装を個別に保守する代わりに、信頼できる唯一の情報源を維持できます。

mitosis は無料で使えますか？ライセンスは？

mitosis は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

mitosis は今もメンテナンスされていますか？

活発にメンテナンス中。mitosis の最終コミットは 2026年9月29日 です。

mitosis は何に使えますか？

異なるフレームワークを使うチームが利用するデザインシステムの保守。 複数のフレームワーク向けビルドを含むコンポーネントライブラリのnpm公開。 Figmaのデザインから、複数のフロントエンドスタック向けにコンポーネントコードを生成。

mitosis のインストール方法は？

create コマンドで新しい Mitosis プロジェクトを作成します: npm create @builder.io/mitosis@latest 新しいプロジェクトで生成された README を読み、コンポーネントのビルドとテストの方法を確認します

mitosis はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/BuilderIO/mitosis