Canvas Builder

Canvas Builder extends Canvas with a visual page-building system for Drupal. Editors can create responsive layouts, style content with immediate visual feedback, and save fully designed sections as reusable patterns without leaving the editing experience.

Administrators control which components and styling options are available, while developers can extend the system through plugins, styling profiles, and custom events. This keeps page building flexible for editors while remaining structured and consistent with the site’s design system.

Canvas Builder features

Visual styling Style backgrounds, spacing, typography, borders, and more with immediate visual feedback. Responsive layouts Build with drag-and-drop Section and Column components, then configure layouts independently for each breakpoint. Reusable sections Save completed sections as reusable patterns or begin with administrator-curated templates. Editor-friendly controls Select nested components directly on the canvas, control section visibility, and keep styling within Drupal’s revision workflow. Design-system integration Use Bootstrap 5, Tailwind, CSS variables, or a custom framework-agnostic styling profile. Administrator governance Control which components, plugins, and styling options editors can use on each project. Developer extensibility Add custom style controls, behaviors, integrations, and event-driven workflows without forking Canvas Builder.

Canvas Builder AI

Canvas Builder AI is an optional submodule that brings governed, AI-assisted page and section building into the Canvas editor.

Guided page and section building Start from a prompt or template, review generated suggestions, refine the result, and publish through the normal Canvas workflow. Approved components only AI can use only the components and styling options explicitly approved by an administrator. Content-aware suggestions Ground generated layouts in approved site content, media, templates, and semantic component descriptions. Validated, draft-safe edits Generated plans are validated server-side and applied through Canvas as ordinary, undoable draft edits.

Requirements: Enable the canvas_builder_ai submodule, install the Drupal AI module with AI Agents, and configure a compatible LLM provider. Canvas Builder does not store API keys or manage provider configuration.

Installation requirement

Until the required functionality is merged into Canvas, apply the following patch through your root composer.json file.

{
  "patches": {
    "drupal/canvas": {
      "Canvas MR 1071": "https://git.drupalcode.org/project/canvas/-/merge_requests/1071.patch"
    }
  }
}