Drupal has had page-building tools before โ€” Paragraphs, Layout Builder, Page Manager โ€” but none of them delivered the visual, intuitive experience that Webflow, Elementor, or the WordPress block editor provides. The Experience Builder initiative (codenamed "Canvas") changes that. It's a native visual page builder built from the ground up on Drupal's Single Directory Components system, designed to become the default way pages are assembled in Drupal CMS and, eventually, Drupal core.

1. What is the Experience Builder?

The Experience Builder is a React-powered visual editor embedded in the Drupal admin interface. It allows content editors to drag, drop, configure, and preview page layouts using components โ€” all without touching code or configuration forms. Key design principles:

  • Components are the same SDCs developers build โ€” no separate "block" or "widget" system
  • Changes are saved as structured data, not HTML โ€” clean, queryable, API-friendly
  • The editing interface renders server-side for accurate previews
  • Undo/redo, history, and collaborative editing are first-class features

2. Single Directory Components Foundation

Everything in the Experience Builder is built on SDC. When a developer creates an SDC component, it automatically becomes available in the Experience Builder's component palette โ€” no registration, no extra configuration:

/* web/modules/custom/site_components/components/hero-banner/
   โ”œโ”€โ”€ hero-banner.component.yml  (defines props with JSON Schema)
   โ”œโ”€โ”€ hero-banner.twig           (template)
   โ”œโ”€โ”€ hero-banner.css            (scoped styles)
   โ””โ”€โ”€ hero-banner.js             (optional progressive enhancement) */

# hero-banner.component.yml
name: Hero Banner
props:
  schema:
    type: object
    properties:
      heading:
        type: string
        title: Heading
      subheading:
        type: string
        title: Subheading
      cta_text:
        type: string
        title: Button Label

In the Experience Builder, this component appears in the palette with form fields auto-generated from the JSON Schema props definition.

3. The Component Model

Components in the Experience Builder are classified into three types:

  • Layout components โ€” define structural slots (columns, sections, grids) that other components snap into
  • Content components โ€” render content fields from Drupal entities (node title, body, image)
  • UI components โ€” standalone elements (button, card, icon, divider) that don't depend on entity data

This classification enables smart placement rules โ€” the editor won't allow a layout component inside a UI component, for example, keeping page structures semantically valid.

4. The Visual Canvas Interface

The editing canvas is a full-page preview that updates in real-time as components are configured. The editing panel floats alongside the canvas (not replacing it). Key UX features:

  • Click any component to select and edit its props in the side panel
  • Drag components from the palette onto the canvas or between slots
  • Responsive preview โ€” toggle between desktop, tablet, and mobile views
  • Style overrides for spacing, colour, and typography within design system bounds
  • Content slots can be bound to entity fields for dynamic content

5. How it Differs from Layout Builder

Layout Builder, shipped in Drupal 8.5, allows editors to arrange blocks in column-based layouts. The Experience Builder supersedes it:

  • Layout Builder uses Drupal blocks; Experience Builder uses SDC components (more powerful, developer-friendly)
  • Layout Builder has no visual canvas โ€” editing happens in a split view. Experience Builder is fully visual
  • Layout Builder stores layout as serialised PHP arrays; Experience Builder stores structured JSON
  • Experience Builder is React-powered, enabling richer interactions and real-time preview

Layout Builder will continue to work in Drupal 11 and 12 but is not receiving new feature investment โ€” the Experience Builder is the path forward.

6. Server-Side Rendering and Performance

A potential concern with React-powered page builders is performance โ€” client-side rendering and heavy JavaScript bundles can hurt Core Web Vitals. The Experience Builder addresses this by keeping rendering server-side. The React interface is only loaded in the admin/editing context. On the public-facing site, pages are rendered by Drupal's standard Twig templating, served through the render cache and dynamic page cache.

Components built with SDC can also progressively enhance โ€” pure CSS by default, with optional JavaScript loaded only when needed.

7. Current Status and Timeline

As of Drupal 11.1, the Experience Builder ships as an experimental module. It is included in Drupal CMS. The stabilisation roadmap targets stable API by Drupal 11.3 and full production-readiness by Drupal 12.0.

If you're starting a new Drupal project today, we recommend:

  • Build all new UI components as SDCs โ€” they will work in the Experience Builder without modification
  • Avoid Layout Builder for new projects โ€” migrate existing Layout Builder implementations to SDC components ahead of Drupal 12
  • Evaluate the Experience Builder experimental module for editorial workflow prototyping