First Look at Drupal CMS V2 (alpha1) + Drupal Canvas

Don’t forget to subscribe to our YouTube channel to stay up-to-date.

Drupal CMS V2 alpha1 introduces Drupal Canvas, a modern page builder that changes how you create content and build sites.

In the video above we cover installation, key features, and hands-on use of Drupal Canvas. You’ll learn the new interface, site templates, the Mercury theme, visual page building, and how to create code components.

What is Drupal CMS V2?

Drupal CMS V2 builds upon the Starshot initiative that launched with Drupal CMS V1. The primary focus of this release centers on Drupal Canvas, the new page builder that changes how you create and edit content.

What’s Drupal Canvas

Drupal Canvas is a visual page builder that replaces traditional content editing workflows. The tool provides a drag-and-drop interface similar to modern page builders like Gutenberg, Elementor, or other block-based editors. You control components from a right-hand panel while accessing your component library from the left side.

Canvas enables site editors and builders to create complex page layouts without a developer.

Installation and Setup

System Requirements

To install Drupal CMS V2, you need a local development environment (DDEV recommended).

Installation Commands

Create a new project directory and run the following commands:

mkdir drupal-cms-v2
cd drupal-cms-v2
ddev config --project-type=drupal11 --docroot=web
ddev composer create-project drupal/cms:2-alpha1 -s alpha --no-install
ddev composer config minimum-stability alpha
ddev composer install
ddev composer drupal:recipe-unpack
ddev launch

NOTE: You may have to adjust the version as new versions are released.

Drupal CMS Installation

What Are Site Templates?

Site templates in Drupal CMS V2 represent a form of recipe. Think of them as specialized installation profiles that configure your site with specific functionality, content structures, and design elements.

Site templates are NOT themes. They configure functionality and initial content structure, though they may include theme selection as part of their configuration.

Site Templates: Starter vs Byte

The two available site templates serve different purposes:

Starter Template: Provides a basic foundation with essential features enabled. This template offers more flexibility for customization and includes fewer pre-configured components.

Byte Template: Delivers a more complete site setup with additional features, example content, and pre-built page layouts. This template demonstrates Canvas capabilities with ready-to-use components and page structures.

Mercury Theme Overview

Replacing Olivero

Drupal CMS V2 introduces Mercury, a modern theme that replaces Olivero as the default frontend theme. Mercury provides the visual foundation for Canvas-built pages.

Design and Structure

Mercury delivers a contemporary, agency-style design featuring:

• Clean, professional header with navigation.
• Grid-based component layouts.
• Responsive design for all device sizes.
• Pre-styled components.

The theme includes example pages demonstrating:

• Feature sections with icon grids.
• Pricing tables.
• Resource listings.
• Blog layouts.
• Contact forms.

Backend Changes in Version 2

Gin Admin Theme

The Gin admin theme continues as the default backend interface, providing a clean, modern administration experience. The interface remains largely consistent with Drupal CMS Version 1.

New Pages Tab

A new “Pages” tab appears under the Content section. This tab lists all pages managed by Drupal Canvas, separating them from traditional content types. Pages created with Canvas don’t appear in the standard content listing.

To access Canvas-managed pages:

1. Navigate to Content > Pages.
2. View all Canvas pages in the listing.
3. Click Edit to open the Canvas interface.

You can also access Canvas pages directly by navigating to /canvas on your site.

Understanding the Canvas UI

To access the Canvas interface, navigate to the home page and click Edit.

Interface Layout

The Canvas interface organizes tools across several areas:

Top Bar: Contains page navigation, zoom controls, device preview toggles, and save options.

Left Sidebar: Houses the component library, layers view, pages list, and templates.

Center Canvas: Displays the page preview with editable components.

Right Panel: Shows component properties, page data, and configuration options.

This layout mirrors modern page builders, providing familiar interaction patterns for users experienced with tools like Elementor or Gutenberg.

Mobile and Responsive Preview

Canvas provides device-specific preview modes:

• Full: Full-width display (default view).
• Tablet: Medium-width preview.
• Mobile: Small-screen preview.

You can zoom the canvas in or out using:

• The zoom dropdown in the top bar.
• Command/Control + scroll wheel.
• Preset zoom levels (50%, 75%, 100%, etc.).

The preview accurately reflects how components render at different viewport sizes, enabling you to test responsive design without leaving the editor.

Page Data Controls

The right panel displays different content depending on context:

No Selection: Shows page-level settings including title, URL alias, SEO fields, and meta description.

Component Selected: Displays component-specific properties, styling options, and content fields.

The contextual panel updates immediately when you select different elements, keeping relevant controls accessible.

Components and Library

What Are Components?

Components in Drupal Canvas are reusable building blocks for page construction. They encapsulate design, functionality, and content into discrete units you can add to pages.

The terminology varies across platforms:

• Gutenberg calls them “blocks”.
• Elementor uses “widgets”.
• Canvas refers to them as “components”.

Regardless of naming, the concept remains consistent: modular, reusable page elements.

Component Types

Canvas supports several component sources:

Theme Components: Single Directory Components (SDC) provided by the active theme. Mercury includes numerous pre-built components like headings, buttons, sections, grids, and hero images.

Block Components: Traditional Drupal blocks exposed to Canvas, including Views displays and custom blocks.

Pattern Components: Reusable arrangements of components that you can save and deploy across pages.

Code Components: Components you create within Canvas for project-specific needs.

Managing the Library

Access the component library from the left sidebar. The library organizes components by type and provides search functionality for locating specific items.

To add a component to your page:

1. Locate the component in the library.
2. Drag the component onto the canvas.
3. Drop it in the desired location.
4. Configure the component using the right panel.

Working with Layers and Structure

Page Structure View

The Layers panel displays a hierarchical tree view of all components on the current page. This view helps you:

• Understand component nesting and relationships.
• Select components that are difficult to click on the canvas.
• Reorder components within their containers.
• Navigate complex page structures.

Navigating Component Hierarchy

Components can contain other components, creating nested structures. For example:

• A Section component contains Header, Grid, and Footer regions.
• Grid regions contain individual columns.
• Columns contain specific content components.
• Content components may contain additional nested elements.

The Layers panel highlights the selected component and its position in the hierarchy, making navigation through complex structures manageable.

Templates

Replacing Manage Display

The Templates section in Canvas fundamentally changes how you control content display. Instead of the traditional “Manage Display” configuration page, you build display templates visually within Canvas.

Template Functionality

Templates define how content types render on the frontend. You create templates using the same visual interface as pages, arranging components and mapping fields to component properties.

The Templates tab in the left sidebar provides access to all available templates, allowing you to edit display logic without writing code or configuring complex field formatters.

Editing Header and Footer

Global Components

Header and footer components appear in green on the canvas, distinguishing them from page-specific components (shown in purple). These global components apply across all pages that reference them.

Adding a Button to Header

To modify the header:

1. Double-click to enter the header editing context.
2. The dropdown indicator shows you’re editing the header group.
3. Drag a Button component from the library.
4. Drop it in the desired location within the header.
5. Configure button properties:

• Variant: primary
• Label: “Sign Up”
• URL: Your target link
• Button size: small, medium, or large
• Icon: Optional icon with direction control

1. Click Review Changes to see pending modifications.
2. Click Publish to save all changes.

The button immediately appears in the header across all pages.

Modifying Footer Content

Editing the footer follows the same process:

1. Double-click to enter footer editing context.
2. Add a Text component.
3. Enter your content (e.g., “Text goes here”).
4. Apply formatting (bold, italic, alignment).
5. Review your changes.
6. Publish to make changes live.

The footer updates across all pages, maintaining consistent site-wide branding and information.

Creating Pages with Canvas

Creating a New Page

To create a new Canvas page:

1. Expand Pages on the left.
2. Click + New.
3. Enter the page title (e.g., “FAQs”).
4. Configure page-level settings in the right panel:

• URL alias
• SEO settings

Adding Sections and Layouts

Start building the page by adding a Section component:

1. Drag a Section component onto the canvas.
2. The section provides three regions:

• Header: For introductory content
• Grid: For main content in columns
• Footer: For concluding elements

1. Add components to each region as needed.

Building an FAQ Page

Create a frequently asked questions page:

Header Content:

1. Add a Heading component to the header region.
2. Set Heading Text to “Frequently Asked Questions”.
3. Configure heading properties:

• Heading Level: 2
• Text Alignment: Center

1. Add a Text component below the heading.
2. Enter descriptive text.
3. Set text size and alignment to match the heading.

Grid Content:

1. Select the section component.
2. Configure the Content layout to 50/50 (two columns).
3. Add an Accordion Container to one column.
4. Add Collapsible Section components within the container.
5. Configure each collapsible section:

• Section Title: The question text
• Heading level for title: 3
• Open by Default: Enable for the first question

1. Add Text component as the answer.
2. Add multiple collapsible sections to build out the FAQ.

Working with Grid Layouts

Grid layouts provide flexible column arrangements:

Single Column: 100% width, one column. Two Columns: 50-50, 33-67, 67-33, 25-75, or 75-25. Three Columns: 33-33-33, 50-25-50, 25-25-50. Four Column: 25-25-25-25

Select the section component and choose your desired layout from the Content Layout dropdown. Components within the grid automatically adjust to the new column structure.

Advanced Component Features

Accordion Components

Accordion components require two parts:

1. Accordion Container: The wrapper that manages accordion behavior.
2. Collapsible Sections: Individual accordion items within the container.

Ensure collapsible sections nest properly within the container using the Layers panel. Improperly nested components won’t function as accordion items.

Group Components

Group components organize related elements and apply shared styling:

1. Add a Group component to contain related content.
2. Place components within the group.
3. Apply background colors, padding, and borders to the group.
4. The styling applies to all contained components.

Groups prove particularly useful for:

• Creating card-style layouts.
• Highlighting important content sections.
• Organizing form elements.
• Building custom component combinations.

Webform Integration

Canvas integrates with the Webform module, allowing you to embed forms directly into pages:

1. Add a Webform component to your page.
2. Select the desired form from the dropdown.
3. Configure form display options.

NOTE: Some styling compatibility issues may exist between Webform and Mercury theme. You may need to adjust form element styling to match your design.

Modifying Content Type Templates

Replacing Manage Display

Content type display templates now live within Canvas. This replaces the traditional “Manage Display” configuration page and Layout Builder workflows.

Creating a Content Type Template

First, create your content type through the standard Drupal interface.

To create a display template in Canvas:

1. Open the Canvas editor.
2. Expand Templates in the left sidebar.
3. Click + Add new template.
4. Select your content type and view mode from the Template dropdown.
5. Click Add new template.

The template appears in the left sidebar, grouped by content type under “Full content” (or your selected view mode).

Build the template using Canvas components just as you would build a page.

Linking Field Data to Components

To link a field to a component:

Display Title:

1. Add a Heading component to your template.
2. Click the link icon next to Heading Text.
3. Select the Title field from the dropdown.

Display Formatted Text:

1. Add a Text component to your template.
2. Click the link icon next to Rich Text.
3. Select your formatted text field (e.g., Body).

The link icon connects field data to component properties, enabling dynamic content display.

Creating Pages with Views

Embedding Views in Canvas Pages

Canvas pages support embedded Views, allowing you to display content listings within the visual page builder.

Creating the View

Create a View display before adding it to your Canvas page:

1. Navigate to Structure > Views > Add view.
2. Set View name to “Tasks” (or your desired name).
3. Configure Show to filter content of type Task.
4. Under Block settings, check Create a block.
5. Set the Block name as desired.
6. Click Save and edit.
7. Verify the Block display includes Filter criteria set to Content: Published (Yes).

Building the Canvas Page

Create a new page to display your View:

1. Expand Pages in the left sidebar.
2. Click + New.
3. Enter the page title: “Latest Tasks”.
4. The URL alias populates automatically (e.g., /tasks).
5. Drag a Section component onto the canvas.

Add Header Content:

1. Add a Heading component to the Header region.
2. Set Heading Text to “Latest Tasks”.
3. Configure heading properties:

• Heading Level: 2
• Text Alignment: Left

Embed the View:

1. Locate the Lists (Views) category in the component library.
2. Drag the View component into the Grid region.
3. Select your Tasks view from the dropdown.

Review your changes and click Publish.

The View displays within your Canvas page, combining visual page building with dynamic content listings.

Single Directory Components

SDC Integration

Drupal Canvas heavily integrates with Single Directory Components (SDC), a Drupal core feature for defining reusable components. Every component in the Canvas library originates from an SDC definition.

Component Structure

SDC components live in the theme’s components directory. Each component includes:

• Component metadata file: Defines component properties, slots, and configuration.
• Twig template: Renders the component.
• CSS/JavaScript: Optional styling and behavior.

Code Components vs SDC

Canvas supports two component architectures:

SDC (Single Directory Components): Standard Drupal core components using Twig templates. Most theme components use this architecture.

Code Components: Built using JSX. These components provide enhanced interactivity and are typically used for complex widgets.

Creating Code Components

Beyond SDC Components

Canvas supports creating custom code components directly within the editor. These components use JSX and provide enhanced interactivity beyond traditional Single Directory Components.

Building a Code Component

To create a new code component:

1. Click Manage Library in the left sidebar.
2. Select the Code tab.
3. Click New.
4. Choose Code Component.

Component Editor Interface

The code component editor provides several areas:

Left Panel: Write your JavaScript (JSX) and CSS code, including global styles.

Right Panel: Displays a live preview of your component as you build.

Bottom Section: Define component data including props and slots.

Adding the Component to Your Library

After building your component:

1. Review the live preview to verify functionality.
2. Click Add to components in the right panel.
3. The component appears in the library for use on pages.

NOTE: Once a component appears on any page, you cannot modify its props or slots. You can edit the component code, but structural changes require removing the component from all pages first.

Using Drupal Canvas AI

AI Integration Overview

Drupal Canvas AI integrates with the Drupal AI module suite, enabling AI-assisted page building, component suggestions, and code component generation within Canvas.

Setting Up Canvas AI

Enable AI features in Canvas:

1. Install the AI Assistant module (included in Drupal CMS).
2. Configure API keys for your AI service provider.
3. Install the Canvas AI module using Drush:

drush en canvas_ai

NOTE: The Canvas AI module currently requires Drush installation and doesn’t appear in the backend UI.

Using AI Features

Access AI capabilities within the Canvas editor:

1. Open the Canvas editor.
2. Click Open AI Panel in the top left corner.
3. Enter your prompt in the text field (e.g., “build me a hero section”).
4. The AI generates components or page structures based on your request.

AI features accelerate page building by generating starting points for common layouts and components.

Summary

Drupal CMS V2 alpha1 introduces Drupal Canvas, a visual page builder that modernizes how you create and manage content in Drupal.

Key Features:

• Visual Page Building: Drag-and-drop interface with familiar component-based workflows.
• Mercury Theme: Modern design replacing Olivero, built with Single Directory Components.
• Template System: Visual display templates replace traditional Manage Display configurations.
• Global Components: Edit headers and footers once, apply everywhere.
• Views Integration: Embed content listings directly into Canvas pages.
• Code Components: Create custom JSX components within the editor.
• AI Integration: Optional AI-assisted page building through Canvas AI module.

Start experimenting with Drupal CMS V2 alpha1 in development environments. As an alpha release, expect changes and improvements, but the core concepts will remain consistent.