grapesjs-studio-sdk

GrapesJS Studio SDK

GrapesJS Studio SDK は、アプリに埋め込んで次のものを作成できる、完全にカスタマイズ可能なビジュアルビルダーです。

• ウェブサイトとランディングページ
• ニュースレターとメールコンテンツ
• ドキュメントエディター

セットアップ、設定、プラグインの統合、プロジェクトタイプの実装にこのスキルを使用してください。

インストール

npm i @grapesjs/studio-sdk

エディターの初期読み込み

React：

import StudioEditor from "@grapesjs/studio-sdk/react";
import "@grapesjs/studio-sdk/style";
// ...
<StudioEditor
  options={{
    licenseKey: "LOCAL_LICENSE_KEY",
    project: {
      type: "web", // 'email' | 'document'
    },
  }}
/>;

JavaScript（その他のフレームワークまたはバニラ）：

import createStudioEditor from "@grapesjs/studio-sdk";
import "@grapesjs/studio-sdk/style";
// ...
createStudioEditor({
  licenseKey: "LOCAL_LICENSE_KEY",
  project: {
    type: "web", // 'email' | 'document'
  },
});

ライセンスキーの動作

• localhost では、ローカル開発用に任意の文字列が有効です。
• localhost 以外のドメインでは、有効な licenseKey が必要です。詳細はこちら：rules/overview/licenses.md

プロジェクトタイプ

• rules/project-types/email.md - MJML ニュースレターの作成やメール向けの編集には、メールモードを使用します。
• rules/project-types/web.md - 複数ページのコンテンツ構成を持つウェブサイトやランディングページには、ウェブモードを使用します。
• rules/project-types/document.md - 印刷物のようなレイアウトを文書向けのデフォルト設定で作成するには、ドキュメントモードを使用します。

初期セットアップとプロジェクトタイプの選択後、次に永続化を設定します。

エディターを完全に機能させるには、次に永続化を設定することが重要です。プロジェクトの読み込みと保存方法、およびアップロードされたアセットの保存と取得方法を定義してください。

設定

• rules/configuration/overview.md - 主な設定領域を確認し、統合における各領域の関係を把握します。
• rules/configuration/projects.md - プロジェクトの初期化、プロジェクトデータの保存、読み込み、保存、およびエクスポートの動作を設定します。
• rules/configuration/blocks.md - エンドユーザーがキャンバスにドロップできる、再利用可能なブロックライブラリとカテゴリを定義します。
• rules/configuration/components/overview.md - コンポーネントタイプの登録、解析ルール、カスタムコンポーネントのアーキテクチャを理解します。
• rules/configuration/components/properties.md - 構造、動作、スタイル、エクスポートを制御する、コンポーネントプロパティモデルの全容を確認します。
• rules/configuration/components/methods.md - コンポーネントモデル／ビューの API を使用して、プログラムからコンポーネントを調査、変更、拡張します。
• rules/configuration/assets/overview.md - アセットマネージャーでのアセットのアップロード、保存、閲覧の動作を設定します。
• rules/configuration/assets/asset-providers.md - 外部アセットサービスに接続し、カスタムメディアソースのプロバイダー統合を定義します。
• rules/configuration/fonts.md - タイポグラフィを制御するため、利用可能なフォント、カスタムソース、プロバイダー統合を設定します。
• rules/configuration/global-styles.md - ユーザーが編集でき、プロジェクトコンテンツ全体に一貫して適用される共通のスタイルコントロールを定義します。
• rules/configuration/layout/overview.md - パネルの配置と、エディター UI 全体のレイアウト構造を制御します。
• rules/configuration/layout/components.md - Layout Components とそのプロパティオプションを使って、エディター UI を構成します。
• rules/configuration/pages.md - 複数ページのプロジェクトを管理します。ページの作成、コンテキストの切り替え、ページ単位の編集を行います。
• rules/configuration/templates.md - 新しいプロジェクト向けのテンプレートカタログとテンプレート選択フローを設定します。
• rules/configuration/themes.md - エディターインターフェースの UI テーマトークン、アイコン、ビジュアルスタイルをカスタマイズします。
• rules/configuration/datasources/overview.md - レコード、変数、条件、繰り返し可能な出力パターンを使用して、構造化データをコンテンツにバインドします。
• rules/configuration/datasources/template-engines.md - テンプレートエンジンを統合し、データバインディング構文をレンダリングおよびインポート／エクスポートのワークフローに対応付けます。

プラグイン

• rules/plugins/ai/overview.md - AI プラグインの全体的なアーキテクチャと、UI とバックエンドの役割を理解します。
• rules/plugins/ai/ai-backend.md - リクエストのフローやストリーミング応答など、バックエンド側の AI 処理を実装します。
• rules/plugins/ai/ai-chat.md - エディター内の AI チャット UI の動作を追加、設定します。
• rules/plugins/asset-providers/google-fonts.md - フォントの検索と挿入に使用するアセットプロバイダーとして Google Fonts を追加します。
• rules/plugins/asset-providers/youtube-asset-provider.md - 動画メディアの選択と埋め込みに使用するアセットソースとして YouTube を追加します。
• rules/plugins/canvas/absolute-mode.md - 座標ベースのレイアウト編集に対応する、自由形式の絶対配置を有効にします。
• rules/plugins/canvas/emptyState.md - キャンバスコンポーネント内の空状態のプレースホルダーとオンボーディングのヒントをカスタマイズします。
• rules/plugins/canvas/full-size.md - ビューポートの制約を超える大きなレイアウトを編集できるよう、キャンバスのフルサイズモードを有効にします。
• rules/plugins/canvas/grid-mode.md - キャンバス上で CSS Grid を視覚的に編集するコントロールを有効にします。
• rules/plugins/components/accordion.md - セクションやインタラクションの動作を設定できるアコーディオンコンポーネントを提供します。
• rules/plugins/components/animation.md - コンテンツの遷移やエフェクトに使用する、設定可能なアニメーション動作を追加します。
• rules/plugins/components/dialog.md - コンテンツやインタラクションのオプションを設定できるダイアログ／モーダルコンポーネントを提供します。
• rules/plugins/components/flex.md - レスポンシブな行／列の構成を効率化する、フレックスベースのレイアウトブロックを追加します。
• rules/plugins/components/fslightbox.md - FsLightbox を利用したメディア閲覧機能を追加します。
• rules/plugins/components/iconify.md - 選択画面からアイコンを挿入できるよう、Iconify のコレクションを統合します。
• rules/plugins/components/lightGallery.md - LightGallery を利用したギャラリーおよびメディア閲覧コンポーネントを追加します。
• rules/plugins/components/listPages.md - プロジェクトのページモデルからナビゲーション用ページリストを動的に生成します。
• rules/plugins/components/swiper.md - 動作を設定できる、Swiper ベースのカルーセル／スライダーコンポーネントを追加します。
• rules/plugins/components/table.md - より高度な編集コントロールを備えたテーブルコンポーネントを追加します。
• rules/plugins/custom-renderer/react.md - 独自の React コンポーネントを使ってプロジェクトを構築、レンダリングするためのカスタムキャンバスレンダラーです。
• rules/plugins/data-sources/ejs.md - データソースに基づくレンダリングとエクスポートのテンプレートエンジンとして EJS を使用します。
• rules/plugins/data-sources/handlebars.md - データソースに基づくレンダリングとエクスポートのテンプレートエンジンとして Handlebars を使用します。
• rules/plugins/layout/sidebar-buttons.md - よく使うエディターパネルにすばやくアクセスできるサイドバーアクションレイアウトを追加します。
• rules/plugins/preset/printable.md - ドキュメント向けレイアウトに、印刷に適したデフォルト設定とコンポーネントを適用します。
• rules/plugins/rte/prosemirror.md - デフォルトのリッチテキストエディターを ProseMirror の統合に置き換えます。
• rules/plugins/rte/tinymce.md - デフォルトのリッチテキストエディターを TinyMCE の統合に置き換えます。