plasmicapp/plasmic

これは何？

主な機能

• 01独自のReactコンポーネントをビジュアルエディターにドラッグ＆ドロップできます。
• 02ビジュアルで作成したページを既存のアプリケーションやWebサイトに公開できます。
• 03codegenを使ってコードベースにReactコードを生成できます。
• 04実行時にコンテンツやコンポーネントを取得するHeadless APIを利用できます。
• 05react-ariaを基盤としたデザインシステム用コンポーネントを標準搭載しています。
• 06Figmaのデザインをインポートし、DOM/CSSに変換できます。
• 07共同作業者向けのデザイン制約機能を備えたコンテンツ作成モードがあります。

ユースケース

• マーケティングチームが、承認済みのReactコンポーネントを使ってNext.jsサイトのランディングページを作成する。
• ビジュアルエディターを使って、社内ツール、顧客ポータル、業務用ソフトウェアを構築する。
• ホスティングやコマースのプラットフォームを移行せずに、既存のReactコードベースへビジュアルCMSレイヤーを追加する。

クイックスタート

1. 1

   使用するフレームワーク向けのPlasmic loaderパッケージをインストールします（Next.jsの例）

   npm install @plasmicapp/loader-nextjs
2. 2

   ビジュアルエディターでドラッグ＆ドロップできるように、独自のReactコンポーネントを登録します

3. 3

   PlasmicRootProvider内でPlasmicComponentを使い、Plasmicで作成したコンポーネントをアプリ内にレンダリングします

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

• !platform/ディレクトリはMITではなくAGPLライセンスです。
• !コードベースとの完全な統合には、ドキュメントに記載されたフレームワーク固有のセットアップが必要です。

トピック

よくある質問

plasmic とは？

Reactコンポーネントをドラッグ＆ドロップして、コードベース内でアプリやWebサイトを作れるオープンソースのビジュアルビルダー。 Plasmicは、コードを使うかどうかを選びながら、WebアプリケーションやWebサイトをデザイン・構築できるビジュアルビルダーです。主な用途として、マーケティングチームがNext.jsサイトでReactコンポーネントを組み合わせてランディングページを作成すること、社内ツールや顧客ポータルを構築すること、特定のCMS、ECプラットフォーム、ホスティングサービスに縛られずにWebサイトを作成することが挙げられます。

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

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

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

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

plasmic は何に使えますか？

マーケティングチームが、承認済みのReactコンポーネントを使ってNext.jsサイトのランディングページを作成する。 ビジュアルエディターを使って、社内ツール、顧客ポータル、業務用ソフトウェアを構築する。 ホスティングやコマースのプラットフォームを移行せずに、既存のReactコードベースへビジュアルCMSレイヤーを追加する。

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

使用するフレームワーク向けのPlasmic loaderパッケージをインストールします（Next.jsの例）: npm install @plasmicapp/loader-nextjs ビジュアルエディターでドラッグ＆ドロップできるように、独自のReactコンポーネントを登録します PlasmicRootProvider内でPlasmicComponentを使い、Plasmicで作成したコンポーネントをアプリ内にレンダリングします

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

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