Leeuwen Room I&II

Page Builder Deathmatch

Canvas and Display Builder: an easel whose canvas turns from painted strokes into building blocks

Andi Rüther @anruether & Merlin Rutz @geek-merlin

DrupalCon Rotterdam 2026, 28 September to 1 October
HOOK_DEV_ALTER()

CrowdPower.Digital

Who we are

  • Portrait of Andi RütherAndi Rüther: communications, project management, UX
  • Portrait of Merlin RutzMerlin Rutz: strategy, development, consulting
  • HOOK_DEV_ALTER()
    • Long-term Drupal experts
    • Fixing hard problems and envisioning new pathways
  • CrowdPower.Digital
    • Know-how and consulting for cooperatives
    • SaaS for equity fundraising and contract management

Nordhof eG

  • Housing cooperative
  • 20 apartments with community spaces
  • Volume: €6 million in total, €2 million via community funding
  • Via direct loans and member shares
  • Implementation as technical proof-of-concept
Nordhof eG demo frontpage: green header with menu, hero photo of a housing block, headline Gemeinsam bauen wir den Nordhof

Housing

Sustainable energy

Agriculture

Photo in the Nordhof hero: “Dresden Passivhaus Wiener Straße 124” by Jörg Blobelt, Wikimedia Commons, CC BY-SA 4.0

Requirements

  • Header, menu and footer
  • News and events (card/full)
  • Free-form campaign frontpage with funding bars for shares and credits
  • Pledge form that investors fill out
  • Project members update the website on a regular basis

Features

Block layout
core		Manage display
core		Layout Builder
core		Paragraphs
contrib
Page layoutBlocks in theme regions———
Entity display—Fields and formattersLayouts per display—
Entity override——Own layout per entity—
Entity form—Fields and widgets——
Free-form page——Via a node's own layoutFixed section types

Canvas and Display Builder

Canvas logoCanvasUI Suite logoDisplay Builder
Version1.12.0, stable (tested: 1.11.0)1.0.0-beta8 (tested: 1.0.0-beta7)
Built byAcquia and communityUI Suite community
Editor UIReact appHTMX, rendered by Drupal
Stores pages asOwn entity: canvas_pageDisplay config and overrides
Built forEditors and designers firstSite builders first
AICanvas AI submodule shipsChat assistant module, alpha

Tested on Drupal core 11.4.7 · ui_patterns 2.0.21 · Logos: Canvas draft from #3545468, Display Builder under the UI Suite logo

Features

Block layout
core		Manage display
core		Layout Builder
core		Paragraphs
contrib		Canvas
1.11.0		Display Builder
1.0.0-beta7
Page layoutBlocks in theme regions———Page Templates (1.11)Conditional page layouts
Entity display—Fields and formattersLayouts per display—Nodes onlyAny entity
Entity override——Own layout per entity——Own layout per entity
Entity form—Fields and widgets———In progress
Free-form page——Via a node's own layoutFixed section typesPages in the editorVia a node's own layout

Based on Pierre Dureau's comparison, April 2026

Integrations

CanvasDisplay Builder
Views display—Yes
Content editing in the builderYesIn progress
Pattern presetsYesYes
Import from Layout Builder—Yes
Component code editorYes—
Real-time collaboration—Yes
Configurable profiles—Yes
AI integrationSubmoduleIn progress

Pierre Dureau's comparison, April and September 2026

Round 1

Example: Header, menu and footer

Page layout

Entity display

Free-form page

Round 1 · Canvas logoCanvas

Page Templates

  • Navigate to Pages › Add page or /canvas
  • Navigate to ribbon item Templates
  • Enable page templates per:
    • Default
    • Canvas page
    • Content type
  • In theme settings: Use Drupal Canvas for page templates in this theme.
Canvas 1.11 page template editor: Nav with the main menu block selected and its menu level settings, page content marker

Minor quirks: elements in the branding block turned off (#3561919)

Round 1 · UI Suite logoDisplay Builder

Page Layouts

  • Enable Display Builder for page layout and go to Structure › Page layouts
  • Create the default page layout (no conditions)
    • Start from your current site
    • Minimal Drupal page
    • Empty
  • Create a new page layout (with conditions, e.g. path <front>)
Display Builder page layouts list in the Gin admin theme: an Articles layout with a content type condition above the Default layout

Minor quirks: page title with escaped markup (#3621589), recipe install (#3622638)

Round 1 · Header, menu and footer

Recap

LensCanvasDisplay Builder
SetupEasy to find once you are in CanvasEasy to find once you enabled the submodule
Editor experienceSame UI as the contentSite-builder admin screens
Context-awarenessAttach to canvas page, content type template or set as defaultDrupal conditions (content type, user role, path, etc)
MaturityPage Templates new in 1.11, minor bugsBeta 7, minor bugs

Round 2

Example: News as card

Page layout

Entity display

Free-form page

Round 2 · Canvas logoCanvas

Content Templates

  • In the Template section, pick a content type and a view mode you would like to override
  • In the editor: Pick a prop, pick a field: only matching data is offered (Screenhot)


Limitations

Canvas Article teaser content template: News card props mapped to Title, Authored on, image URI, alt text and relative URL

Round 2 · UI Suite logoDisplay Builder

Manage Display

  • In Manage display, pick a content type and a view mode, and enable Display Builder
  • Fields into slots, with Drupal's formatters
  • Props: Mapping of Drupal's entire data model via dropdowns
  • Slots: Drop your field and configure formatter

Limitations

  • Dropdowns can be overwhelming
Display Builder Article teaser display: News card with the image prop drilled from the Image field to the file URI

Round 2 · News card

Recap

LensCanvasDisplay Builder
SetupEasy: only fitting fields offeredEasy, except digging through the data model
Editor experienceReal content in the previewSample content in the builder
ReuseFields in slots need contribFormatters and contrib keep working
MaturityNodes only, #3518272 openBeta 7, any entity type

Round 3

Example: The campaign frontpage + Pledge form embed from our SaaS

Page layout

Entity display

Free-form page

Round 3 · Canvas logoCanvas

Canvas page

  • Drag and drop components or blocks
  • Author text, images and other content with ease
  • Funding bar: values are saved on the campaign node and pulled in via a code component
  • Third-party embed: a second code component that loads the resizer script
Canvas editor with the Nordhof frontpage: layer tree with Hero selected, the page preview with the hero outlined, and the Hero form in the sidebar with hero.jpg in the media library widget

Photo in the Nordhof hero: “Dresden Passivhaus Wiener Straße 124” by Jörg Blobelt, Wikimedia Commons, CC BY-SA 4.0

Round 3 · Canvas logoCanvas

Third-party embed

  • Third-party embed: a second code component that loads the resizer script
Canvas code editor with the CPD embed component, whose JavaScript loads the CrowdPower iframe resizer script, next to the Mitmachen page showing the CrowdPower form Mitglied werden

Round 3 · UI Suite logoDisplay Builder

Entity display overrides

  • Back to Manage display where we enabled Display Builder for a view mode, enable overrides
  • Content editing:
    • Textarea with a minimal editor
    • Plain text field, 128 characters (#3587393)
  • Pledge form: needs a full HTML field somewhere

Limitations

  • Built-in content model is minimal
  • Entity reference source removed (#3501797)
Display Builder editing the frontpage override in the Scaffold view: the Libraries panel with the Nordhof SDCs, the Hero with its Hero image field on top of the tree, and the field source form for Hero image in the sidebar

Photo in the Nordhof hero: “Dresden Passivhaus Wiener Straße 124” by Jörg Blobelt, Wikimedia Commons, CC BY-SA 4.0

Round 3 · Campaign frontpage

Non-structured content

Layout Builder coreCanvasDisplay Builder
LayoutSections, serialized into a field of the nodeOne field item per component, its props as JSONA tree of sources, serialized into a field of the node
Typed textInline blocks: content blocks of their own, with fields and revisionsIn the component's props, inside the layout fieldIn the tree, inside the layout field
Images and mediaMedia fields of the inline blockA media entity, referenced in the component's propsFields of the node (Media Library in the builder: #3501797)

Round 3 · Campaign frontpage

Recap

LensCanvasDisplay Builder
SetupObvious; live data only through a code componentHad to research how: nested selects through the data model
Editor experienceBuilt for this; the Campaign lives outside CanvasTyped text in the textarea; the Campaign changes in the page form
ReuseCode components go on any pageThe layout lives in one node; the next landing page starts over
MaturityStable, symmetric translation, component config drifts with the admin languageBeta, symmetric translation since beta 8; a node-to-node binding needed a patch

Extra round 1

Free-form pages from prompt

Canvas: ships a submodule

Canvas AI turns a prompt into a page from your own SDC library. 1.11.0 adds a page-building agent and a Q&A agent. Needs drupal/ai, AI Agents and an LLM provider.

Display Builder: a module in alpha

display_builder_ai 1.0.0-alpha1 (24 September) adds a chat assistant to the builder. UI Suite Monthly #36 (June 2026) shows agents building a landing page through UI Patterns.

Extra round 2

Multilingual supportCartoon dragon with a propeller cap burning a scroll labelled Traduction and Multilang

Canvas

  • Content translation standard since 1.8.0
  • New pages start in the default language; any language: #3546597, postponed
  • Component config drifts with the admin language: #3555538, postponed

    Proposal for CanvasStore the source string with a fixed language and translate it on read

  • Config in another language than the site default crashes the editor: #3591850

    Works todaytranslation_bliss relabels that config in one command

Display Builder

  • UI strings translated
  • Symmetric content and config translation since beta 8: #3555110
  • Text typed into layouts is translated in the builder; Config Translation and TMGMT don't see it

    Proposal for translation_blissExport that text through UI Patterns into the .po files, and let the import write Display Builder's language overrides

Extra round 3

What translation_bliss doesCartoon dragon with a propeller cap burning a scroll labelled Traduction and Multilang

translation_bliss

Translations as code: .po files in git, config translated on read.

1.0.0-alpha17, maintained by us
drupal.org/project/translation_bliss

Normalized config translations

Config keeps one copy in its source language, and locale translates it on read.

Reviewable language overrides

config/sync/language holds only deliberate overrides. Both builders now keep their layout translations there too.

Config language audit and fixer

drush clangs finds config in an unexpected language, drush clangc relabels it.

Config language widget

Config forms show and set the config's language, Display Builder's included. Canvas edits its config in its own editor.

Config export and import

Config deploys with cim, its translations with tim. Builder layout translations deploy with cim.

Extractor integration (potx)

drush tex collects strings from code and config, tim drops outdated ones. Component labels and Display Builder layout text need an extractor of their own.

Source language support

Config written in German keeps German as its source language, and English becomes a translation.

Extra round 4

Editor technology: HTMX versus React

Canvas
React		Display Builder
HTMX
Code size
PHP + JS lines, no tests, comments or blank lines		50K + 120K16K + 3K
Direct dependencies
Production, Composer + npm		0 + 1291 + 2
Speed
Web vitals, March 2026: first paint / largest paint / speed index		8 s / 8 s / 8 s2 s / 2 s / 2 s
Work so far
In days		Thousands, estimated320 to 350

Figures: Pierre Dureau, Display Builder project manager, September 2026

Extra round 5

Compatibility with existing modules

Canvas
1.11.0		Display Builder
1.0.0-beta7
Page ManagerBreaks: both define a page_variant, the front end goes downCombines: a page layout wraps a Page Manager page
Layout BuilderNo import yet (#3483307, needs work)Imports the Layout Builder display, again on every save
ParagraphsNo Paragraphs source (#3517216); contrib canvas_paragraphs, alphaParagraph displays are built like any other entity display
MetatagBuilt into Canvas pages; with its submodules the page form breaks (#3573787)Stays in the node form, untouched

Extra round 6

Compatibility with each other

They don't install together yet.

UI Patterns fixed its side in dev (#3625036), Display Builder's follow-up is RTBC (#3625330), Canvas's side is open (#3552818).

The UI Patterns dev branch solves this without changes to Canvas.

Extra round 7

Forms!

  • Components for forms
  • Display Builder: an entity form builder is in progress (#3546198)

Two winners

Which builder for which project

Canvas is built for

  • Editors composing pages
  • Layout and content in one interface
  • Pages without a fixed data model

Choose it when editors without Drupal knowledge build pages.

The bill: your agency learns a second stack, React included, to debug and fix it.

9,674 sites · 45 contrib projects build on it · stable

Display Builder is built for

  • Site builders
  • Drupal's data model, any entity
  • Formatters, tokens, contrib
  • SDCs as front-end developers wrote them

Choose it when the site lives on Drupal's data model and a Drupal-savvy team runs it.

The bill: editors get a site-builder tool.

584 sites · 9 contrib projects build on it · beta

Sites: drupal.org usage, week of 13 September 2026 · contrib projects: those that declare a dependency on the builder

Thank you

hook-dev-alter.com

crowdpower.digital

Review this session!

QR code to the DrupalCon session survey for Page Builder Deathmatch