WebflowでReactコンポーネントを使って構築する

※この記事は2025年9月17日にWebflowが公開した下記アップデート情報・ニュースを日本語訳したものです（一部加筆・修正あり）

Build with React components in Webflow

‍

ROI計算ツール、インタラクティブなチャート、マルチステップフォームなどの高度なUIは、サイトの機能性とユーザーエンゲージメントを大きく高めます。

ですが、これらを完全にビジュアル編集で構築するのは現実的でないか、あるいは不可能なことも多くあります。

そこで登場するのがWebflow Conf 2025で発表した Code components です。
今回のリリースにより、開発者は DevLink を使って外部コードベースからReactコンポーネントをインポートし、Webflowのキャンバス上でネイティブのLibraryコンポーネントと同じように扱える ようになりました。

‍

Code componentsで可能になること

• 好みの開発環境で構築
  従来のIDEから「vibe-coding」スタイルの環境まで、自由にコンポーネントを構築し、DevLink経由でCLIからWebflowにインポート可能。
• キャンバスでの直接利用
  インポートしたReactコンポーネントをキャンバス上に配置し、各インスタンスを props・slots・variants で柔軟に設定。
• CMS・Localization・Optimizeとの統合
  CMSに接続したり、コンテンツをローカライズしたり、A/Bテストやパーソナライゼーションに利用可能。
• 継続的インテグレーションとの連携
  CIやLibraryの変更管理ワークフローを活用して、更新をプッシュ・レビュー・公開までスムーズに実行。

‍

チーム全体に新しい可能性を

Code componentsは、Webflowで実現できることの上限を大きく引き上げます。

同時に、チームメンバーそれぞれが 自分の得意なツールを使いながら最高の成果を発揮できる環境 を整えます。

‍

提供開始と今後の展開

Code componentsは、すでに CMSプラン・Business Siteプラン・有料Workspaceプラン を対象に順次提供が開始されています。

詳しくは 開発者向けドキュメント をご確認ください。

さらに、今年後半には以下のアップデートも予定されています

• コンポーネントエクスポートのGAリリース
• AI生成によるコードコンポーネント（Webflow上で直接作成可能）

これにより、ReactとCode componentsのサポートがさらに拡大していきます。

‍