webflow-code-components

Webflow コードコンポーネント

DevLink を使用して、React コードコンポーネントを構築、定義し、Webflow にインポートします。コードコンポーネントを使うと、コードベースで高度なインタラクティブな React コンポーネントを開発し、ビジュアル構成用の共有ライブラリとして Webflow にデプロイできます。

クイックスタート

前提条件： Freelancer、Core、Growth、Agency、Enterprise プランの Webflow Workspace（または CMS、Business、Enterprise プランのサイト）。Node.js 20 以降と npm 10 以降。

1. プロジェクトをセットアップする — CLI と依存関係をインストールします
2. React コンポーネントを作成する — 標準的な React コンポーネントを構築します
3. コードコンポーネントを定義する — declareComponent を含む .webflow.tsx ファイルを作成します
4. Webflow にインポートする — npx webflow library share を実行します
5. キャンバスで使用する — ライブラリをサイトにインストールし、コンポーネントをドラッグ＆ドロップします

一連の手順をすべて解説したチュートリアルについては、references/quick-start.md をご覧ください。

主な概念

• Shadow DOM による分離 — スタイルと DOM はコンポーネントごとにサンドボックス化されます
• 個別の React ルート — コンポーネント間で React Context や状態は共有されません。URL パラメーター、ブラウザーのストレージ、Nano Stores、カスタムイベントを使用してください
• デフォルトで SSR — サーバーでレンダリングされた HTML はクライアントでハイドレーションされます。ブラウザー専用のコンポーネントでは ssr: false に設定して無効にします
• declareComponent — React コンポーネントが Webflow 上でどのように表示されるかを定義します。API の詳細については、references/hooks.md をご覧ください
• プロパティ型 — 11 種類を使用できます（Text、Rich Text、Text Node、Link、Image、Number、Boolean、Variant、Visibility、Slot、ID）
• バンドル — Webpack がライブラリをバンドルします（最大 50MB）

重要な注意事項

• ファイル名は一意の識別子です。 .webflow.tsx ファイルの名前を変更すると、新しいコンポーネントが作成され、古いコンポーネントは削除されます。サイト上の既存のインスタンスは動作しなくなります。
• React Server Components はサポートされていません。標準的な React コンポーネントのみを使用してください。
• コンポーネントはクライアント側でデータを取得できますが、API は CORS をサポートしている必要があります。また、コンポーネントのコードに API キーを埋め込んではなりません。

リファレンスドキュメント

各リファレンスファイルには、検索しやすいように name、description、tags を含む YAML フロントマターがあります。scripts/search_references.py の検索スクリプトを使って、関連するリファレンスを見つけてください。

はじめに

• references/introduction.md：DevLink とコードコンポーネントの概要
• references/quick-start.md：セットアップからキャンバスでの使用までを解説する一連のチュートリアル
• references/installation.md：CLI のインストール、webflow.json の設定、認証

コンポーネントの構築

• references/define-code-component.md：declareComponent、プロパティ、デコレーター、オプション
• references/hooks.md：declareComponent と useWebflowContext フックのリファレンス
• references/component-architecture.md：Shadow DOM、SSR、状態管理のパターン、データ取得
• references/styling-components.md：Shadow DOM 内の CSS、サイト変数、タグセレクター
• references/frameworks-and-libraries.md：Tailwind、styled-components、Emotion、Material UI、Shadcn/UI、Sass、Less

プロパティの型

• references/prop-types.md：使用方法、戻り値、例を含むすべてのプロパティの型
• references/prop-types/text.md：Text — 1 行テキスト入力
• references/prop-types/rich-text.md：Rich Text — 書式付き HTML コンテンツ
• references/prop-types/text-node.md：Text Node — キャンバス上で編集できるテキスト
• references/prop-types/link.md：Link — ターゲットとプリロードを指定できる URL
• references/prop-types/image.md：Image — アセットライブラリから画像を選択
• references/prop-types/number.md：Number — 範囲コントロール付き数値入力
• references/prop-types/boolean.md：Boolean — true/false の切り替え
• references/prop-types/variant.md：Variant — 定義済みオプションのドロップダウン
• references/prop-types/visibility.md：Visibility — 表示／非表示の切り替え
• references/prop-types/slot.md：Slot — 子コンポーネントの挿入
• references/prop-types/id.md：ID — HTML 要素の識別子

バンドルと CLI

• references/cli.md：Webflow CLI コマンド、フラグ、CI/CD での使用方法、トラブルシューティング
• references/bundling-and-import.md：Webpack によるバンドル、CLI インポート、CI/CD、デバッグ

ヘルプ

• references/faq.md：よくある質問 — セットアップ、スタイリング、インポート、トラブルシューティング、パフォーマンス

リファレンスの検索

# List all references with metadata
python scripts/search_references.py --list

# Search by tag (exact match)
python scripts/search_references.py --tag <tag>

# Search by keyword (across name, description, tags, and content)
python scripts/search_references.py --search <query>

# Search only prop type references
python scripts/search_references.py --prop-types
python scripts/search_references.py --prop-types --tag <tag>
python scripts/search_references.py --prop-types --search <query>

スクリプト

• scripts/search_references.py：タグやキーワードでリファレンスファイルを検索するか、メタデータとともにすべてを一覧表示します