Canvas Builder¶

A styling, layout, and motion system for Drupal Canvas — the controls stock Canvas doesn't ship, built to feel like it always had them.

Background, spacing, typography, responsive per-viewport values, scroll/load/click animation, and AI section building — all without leaving the editor, all without writing CSS, all stored as data that rides Canvas's own draft → publish → revision lifecycle. Styles are YAML-driven and pluggable: built-in styles are declared in canvas_builder.plugins.yml, and other modules can add their own — see Extending.

The parts Canvas doesn't have¶

No spacing control, anywhere

Stock Canvas has no padding or margin field. Canvas Builder's box-model editor is click-to-cycle, per side, and writes real utility classes — never an inline style="" on every component.
Nothing moves

Canvas has no animation model at all. Motion (optional, canvas_builder_motion) adds scroll-, load-, and click-triggered effects authored from a Motion tab and played back by a runtime built on web standards — reduced-motion compliance is enforced automatically, not left for you to remember.
One layout, every screen

A Canvas component has a single set of prop values, full stop. Every Canvas Builder style is stored per viewport with a mobile-first cascade, so padding, background, and typography can all differ from mobile to large desktop.
Locked to one class vocabulary

Canvas has no concept of a design system swap. Framework profiles let you flip the entire site between Custom (CSS variables), Bootstrap 5, and Tailwind from one settings page — style once, render in whatever your theme speaks.
AI that writes whatever it wants

The AI section builder (optional, canvas_builder_ai) is constrained to your approved components only, validated server-side against the same style plugins and permissions as manual editing — never freeform HTML dropped onto the page.
A carousel you can't see inside

Canvas's own preview hides a carousel's other slides, an accordion's closed panels, anything off-screen by design. The hidden-children reveal solo-steps through them so you can actually select and style what's hidden.
Rebuilding a look, component by component

Copy Styles / Paste Styles carries a whole style bundle — background, spacing, typography, everything — from one component to any other, any type, any layout. ⌘⇧C, click elsewhere, ⌘⇧V.

The full picture¶

A floating toolbar for every section — width, height, columns, gap, alignment, and section settings, all edited in place without opening a form. See Toolbar for every chip and popover.
Section component with built-in responsive columns — a layout Section SDC whose column layout is driven by the toolbar (and an empty-state chooser with built-in presets). Each visual column is a real Column child component, so content drops into a specific column and drags between columns with native Canvas drag-and-drop; a narrower viewport with fewer columns configured just wraps/stacks rather than removing content.
Double-click to select a parent — design-tool hierarchy navigation: double-click a selected component to jump to the component it lives in, and keep double-clicking to keep walking up. Handy when a child fills its whole area and leaves nothing else to click.
Hidden-children reveal — select a carousel, accordion, tab set, or any container whose children are hidden/off-screen and a floating badge appears with a slide stepper; each step solo-reveals one child in place and selects it, so you can style content Canvas's own preview would otherwise hide from you. Editor-only and non-persistent — it never touches the layout model or triggers autosave.

Floating contextual toolbar with per-viewport column controls over a selected two-column Section — Responsive columns, with a live per-viewport breakdown in the Review panel.

The Column component highlighted as the selected parent after double-clicking its child Text component — Double-click a child to select the component it lives in.

A floating badge reading "1 / 2" with prev/next arrows over a Hero Banner carousel — The hidden-children badge reveals carousel slides one at a time for styling.

Styling¶

Background — color (utility class, including subtle tints and gradients), image and video (Media library), with an overlay (color swatch, opacity, blend mode).
Spacing — padding and margin utility classes.
Typography — heading scale, text color and alignment utility classes.
Motion (optional, canvas_builder_motion) — scroll-, load-, and click-triggered animations authored from the Motion tab and played back on the published page by a native engine built on web standards — no third-party animation library required. A section owns a timeline; each animation is a row on it. Values are per-viewport and ride the same draft → publish → revision lifecycle as every other style, with reduced-motion compliance enforced at runtime, not left to the author to remember.

Background style panel with Color, Image, and Video tabs and a media picker — Background — color, image, or video, with an overlay.

Spacing style panel showing an interactive padding box model with per-side 0px values — Spacing — click-to-cycle padding and margin box model.

Typography style panel with text color swatches and alignment icons — Typography — heading scale, text color and alignment.

The Motion tab: the target, effect and trigger cards, and the timeline dock — Motion — target, effect and trigger, arranged on a section timeline via `canvas_builder_motion`.

Responsive & multi-framework¶

Responsive, per-viewport styling — Mobile / Tablet / Desktop device picker (Large Desktop opt-in); every style is stored per viewport with a mobile-first cascade. Framework-agnostic: stores author-configured class strings only.
Framework profiles — ship and switch between Custom (CSS variables, default), Bootstrap 5, and Tailwind class sets. See Frameworks, Bootstrap, Tailwind.

Device picker dropdown open, listing Mobile 576px, Tablet 768px, Desktop 992px, and Large Desktop 1200px — Every style is stored per viewport, mobile-first.

Admin settings page with Custom, Bootstrap 5, and Tailwind framework radio options — Switch the active framework profile site-wide.

Editing workflow¶

Prop grouping — SDC props organized into Content / Style / Advanced tabs automatically, driven by a YAML annotation on the component — no custom form code needed.
Enable/disable any style plugin — globally, or overridden per component (a card can offer spacing but not background media) — with zero JS/CSS shipped for a disabled plugin.
Revision-aware — a style change is a draft until the page is published, then it is a new revision.
Travels with content — styles carry through duplicate, copy/paste, and Canvas patterns.
Copy Styles / Paste Styles — right-click any component → Styles → Copy Styles, right-click another (any type, any layout) → Styles → Paste Styles to replace its whole style bundle with the copied one. ⌘⇧C / ⌘⇧V do the same on the currently selected component.

Component form with Content, Style, and Advanced tabs — Props auto-organize into Content, Style, and Advanced tabs.

Admin settings page with checkboxes to enable or disable each style feature — Turn off a style feature to hide it from the component editor.

Copy Styles / Paste Styles in action¶

Right-click a styled component, open Styles, and choose Copy Styles:

Right-click the target — any component, any layout — open Styles, and choose Paste Styles (enabled as soon as something is copied):

The target now carries the same background image and spacing — replacing whatever styling it had:

Extending¶

Extensible — add styles, groups, or new style types from your own module.
AI-assisted section building (optional, canvas_builder_ai) — editors describe a section in plain language and it's built from your approved components, governed and validated server-side against the same style plugins and permissions as manual editing.

The Create tab in Describe mode: a Full page / Single section / Describe control above a prompt textarea with image attachments and a Generate button — Describe a section or page and let AI build it from your approved components.

Where to go next¶

Toolbar — the floating section toolbar: every chip, popover, and backing field.
Styles — a closer look at the Background, Spacing, and Typography panels.
Extending — add styles, groups, or style types from your own module.
Events — the client JS API and cb:* event contract.
Frameworks — framework profiles and layout class maps.
Frontend — front-end rendering details.
Motion — scroll-, load-, and click-triggered animation.
AI page building — describe a section or page and let AI build it.

Requirements & installation¶

Drupal ^11.2, drupal/canvas ^1.4, drupal/media

composer require drupal/canvas_builder
drush en canvas_builder

Configuration: Administration → Configuration → Content authoring → Canvas Builder (requires the Administer Canvas Builder permission). Full details, including the optional AI-assisted section builder, are in the project's README.

Issues and patches are welcome in the project issue queue.