Skip to content

Drupal Canvas

Atomic decision guides for building with Drupal Canvas — the first-party visual page builder for Drupal 11.2+. Covers architecture decisions, SDC component authoring, Code Component (React/Preact) development, CLI tooling, theming, Storybook, AI assistant, decoupled patterns, and security.

  • Canvas Overview — What Canvas is, when to use it, and how it differs from standard Drupal content types
  • Component Types Decision — Choose between SDC (Twig), Code Component (React), or External JS Component
  • SDC Component Format — File structure, YAML schema, and Twig template patterns for Canvas SDC components
  • SDC Props Reference — All prop types with YAML syntax, Canvas editor widgets, and gotchas
  • SDC Slots — When and how to define drop zones for nested Canvas component composition
  • SDC Image Handling — Render image props correctly using the canvas:image built-in component
  • Code Component Format — JSX structure, component.yml schema, and allowed package imports for Code Components
  • Canvas NPM Tools — Reference for @drupal-canvas/cli, @drupal-canvas/create, and related packages
  • Canvas CLI Workflow — Local Code Component development — scaffold, build, push, and pull
  • Acquia Nebula — The official Canvas Code Component development template with Storybook and AI skills preconfigured
  • Design Tokens and Theming — How Canvas handles CSS custom properties, Tailwind @theme, and SDC/Code Component styling
  • Storybook Integration — Story formats and setup for Code Component and SDC component development
  • Canvas AI Assistant — canvas_ai submodule setup and how component metadata affects AI page building
  • Decoupled Frontend Patterns — Canvas with Next.js, Astro, Nuxt — component tree API, CLI sync, canvas_extjs
  • Canvas vs Standard SDC Decision — Architectural decision: Canvas page builder vs standard Drupal theming
  • Security Considerations — Known vulnerabilities, access control, and safe Twig/JSX patterns for production
  • Component Creation Workflow — End-to-end steps for creating a new SDC or Code Component from scratch