Drupal Canvas

A comprehensive site-building and content composition system that enables site builders to theme and build websites through a browser-based visual interface, while empowering content creators to compose pages using components without writing code.

canvas
1,110 sites
59
drupal.org
gui api field content theme
site-building page-builder components visual-editor content-composition SDC no-code low-code theming layout
Drupal 11

インストール

Drupal 11 v1.0.0
composer require 'drupal/canvas:^1.0'

概要

Drupal Canvasは、Drupalでのウェブサイトの構築と管理方法を革新する、洗練されたコンポーネントベースのサイト構築プラットフォームです。従来のDrupalテーマ設定の専門知識を不要にする、ビジュアルなブラウザベースのインターフェースを提供します。

このモジュールにより、Drupalの経験がないサイトビルダーでも、基本的なHTML、CSS、テンプレートマークアップ（Twigなど）以外のコードを書くことなく、ブラウザのみを使用してウェブサイト全体のテーマ設定と構築を簡単に行えます。コンテンツ作成者は、開発者に頼ることなくページの任意の部分でコンテンツを構成できます。

Canvasは、Single Directory Components（SDC）、ブラウザで直接作成するJavaScript/Code Components、コンポーネントとしてのBlockプラグインなど、複数のコンポーネントソースをサポートしています。コンポーネントの包括的なバージョン管理システム、自動保存機能、ReactベースのUIのための強力なHTTP API、AIを活用したページ構築やパーソナライゼーションなどの高度な機能を備えています。

このモジュールには、コンポーネント、パターン、フォルダ、ページリージョン、コンテンツテンプレート、アセットライブラリを管理するための設定エンティティの完全なセットが含まれています。Canvasインターフェース内で完全にスタンドアロンページを構築するための専用の「Canvas Page」コンテンツエンティティタイプを提供します。

Features

  • ReactベースのUIによるビジュアルなブラウザベースのサイト構築インターフェース
  • 複数のコンポーネントソースのサポート：Single Directory Components（SDC）、JavaScript/Code Components、Blockプラグイン
  • 自動バージョン追跡とフォールバックサポートを備えたコンポーネントバージョン管理システム
  • 設定エンティティとコンテンツエンティティ両方の自動保存機能
  • UI通信用のOpenAPI仕様に準拠した包括的なHTTP API（v0）
  • コンテンツエンティティバンドル用のコンポーネントベースレイアウトを定義するContent Templates
  • コンポーネントツリーでテーマリージョンをカスタマイズするPage Template/Regionシステム
  • 再利用可能なコンポーネントツリー構成を作成するPatternシステム
  • コンポーネントとパターンのフォルダ整理
  • サイト全体のカスタムCSSとJavaScript用のGlobal Asset Library
  • JSON Schema定義をDrupalフィールドタイプにマッピングするShape Matchingシステム
  • コンテンツエンティティから構造化データを評価するPropExpressionシステム
  • スタンドアロンページ構築用のCanvas Pageコンテンツエンティティタイプ
  • 一貫したプレビューレンダリングのためのセミカップルドテーマエンジン
  • Canvas UIにカスタム機能を追加するExtensionシステム
  • コンポーネント内のリッチテキスト編集のためのCKEditor 5統合
  • コンポーネントでの画像およびメディア処理のためのMedia Library統合

Use Cases

Building Landing Pages Without Code

Marketing teams can create landing pages entirely through the Canvas visual interface. Using the Canvas Page content entity type, they can drag and drop components, configure props through auto-generated forms, and preview changes in real-time. No knowledge of Drupal theming, PHP, or Twig is required.

Creating Consistent Content Templates

Site builders can create Content Templates that define the component-based layout for specific content types (e.g., Article, Event, Product). Content editors then fill in the content data while the visual structure remains consistent. Exposed slots allow limited layout flexibility within defined boundaries.

Developing Custom Components in Browser

Developers can create Code Components directly in the Canvas UI using JavaScript and CSS. These components support props defined via JSON Schema and can access Drupal data through canvasData settings. Ideal for creating interactive components without touching the codebase.

Reusing Component Configurations as Patterns

Common component arrangements (like a hero section with specific styling) can be saved as Patterns. These patterns can then be inserted into any page or template, ensuring consistency and reducing repetitive configuration work.

Customizing Theme Regions

Site builders can populate theme regions (like sidebars, headers, footers) with component trees through the Page Region system. This provides a visual alternative to placing blocks and allows for more complex region compositions.

External Application Integration

Using the canvas_oauth submodule, external applications like headless CMS frontends or mobile apps can interact with Canvas through the authenticated HTTP API. This enables decoupled architectures while maintaining Canvas's visual editing capabilities.

Tips

  • Use the 'V' key shortcut in the Canvas editor to temporarily hide the UI overlay, making it easier to inspect the rendered preview markup in browser developer tools.
  • Install the canvas_dev_mode module during development to access the extensions toolbar and private APIs for debugging.
  • For Code Components that need external data, use the dataDependencies configuration to declare URL fetches and drupalSettings requirements.
  • When creating SDC components for Canvas, define comprehensive JSON Schema with examples for each required prop to improve the auto-generated form experience.
  • Use Patterns to save commonly used component configurations, then insert them into pages for consistent layouts.
  • The canvas_vite module significantly speeds up UI development by enabling Hot Module Replacement during Canvas UI development.

Technical Details

Admin Pages 4
Components /admin/appearance/component

View and manage all available components in the Canvas system. Components can be enabled, disabled, audited, and organized into folders. This page lists components from all sources including SDC, Code Components, and Block plugins.

Pages /admin/content/pages

Manage Canvas Page content entities. View, edit, and delete pages created using the Canvas visual editor.

Drupal Canvas /canvas

Main entry point to the Canvas visual editing interface. Opens the React-based UI for composing pages and content using components.

Canvas Editor /canvas/editor/{entity_type}/{entity}

Visual editor interface for composing content using components. Supports editing Canvas Pages, Content Templates, and other component tree-enabled entities.

権限 10
Administer components

Manage all component configurations, enable/disable components, and access component audit information.

Administer code components

Create, edit, and delete JavaScript/Code components. This permission is restricted because code components can execute JavaScript.

Administer folders

Create, edit, and delete folders for organizing components and patterns.

Administer patterns

Create, edit, and delete reusable pattern configurations.

Administer page template

Configure page regions and manage the page template settings for theme regions.

Administer content templates

Create, edit, and delete content templates that define component layouts for content entity bundles.

Create Canvas Page

Create new Canvas Page content entities.

Edit Canvas Page

Edit existing Canvas Page content entities.

Delete Canvas Page

Delete Canvas Page content entities.

Publish Drupal Canvas Content

Update entities with auto-saved changes in Drupal Canvas. Requires update access for those entities.

Hooks 1
hook_canvas_storable_prop_shape_alter

Alter the storable prop shape for a component property. This hook allows modules to customize how JSON Schema prop definitions are mapped to Drupal field types, widgets, and settings.

Troubleshooting 5
Canvas UI shows a blank screen or doesn't load

Ensure the front-end UI has been built by running 'npm install && npm run build' in the modules/contrib/canvas/ui directory. Also verify that the canvas_stark theme is installed.

Components are not appearing in the component library

Check that components meet the requirements of their source. For SDC components, ensure they have valid JSON Schema definitions in their component.yml file. Visit /admin/appearance/component/status to see disabled and incompatible components.

Auto-save is not working

Verify the user has the 'publish auto-saves' permission and has update access to the entity being edited. Check browser console for API errors.

Code Components are not rendering correctly

Ensure the JavaScript code is valid and the props are correctly defined in the JSON Schema. Check browser console for JavaScript errors.

JSON:API compatibility warnings

Canvas requires JSON:API's read-only mode to be disabled. Check the status report for warnings about JSON:API configuration.

Security Notes 4
  • The 'administer code components' permission is marked as restricted because Code Components can execute arbitrary JavaScript. Grant this permission only to trusted users.
  • Canvas uses CSRF protection for all mutating API endpoints. External API access requires OAuth2 authentication through the canvas_oauth submodule.
  • The canvas_oauth submodule should be used for any external application integration to ensure secure authentication.
  • Component tree inputs are validated against defined schemas to prevent injection of invalid data.