For years, Drupal has been the platform of choice for organizations that need serious digital capabilities—think universities managing millions of pages, government agencies with complex workflows, and Fortune 500 companies running mission-critical websites. The power is undeniable, but there's always been a catch: you needed technical expertise to unlock it. That’s why one of the most exciting areas of Drupal’s journey has been the work underway on more intuitive, visual building experiences.

Ivan Zugec at WebWash explores Drupal CMS V2 alpha1, spotlighting Drupal Canvas—a powerful new visual page builder. This release introduces drag-and-drop content creation, site templates, and the Mercury theme, giving editors and developers modern to...

Drupal Canvas redefines content creation with a drag-and-drop interface, real-time collaboration, and developer-friendly JSX support. Powered by Preact and integrated with Single Directory Components, it bridges no-code editing with frontend developm...

In a blog post published on 8 December 2025, Nadiia Nykolaichuk of ImageX provides a comprehensive walkthrough of Drupal Canvas 1.0 — the new visual page builder for Drupal. Released days earlier, Canvas introduces component-based site creation, AI-a...

What if building pages in Drupal felt as effortless as sketching ideas on a digital canvas — yet powerful enough to satisfy a developer’s need for precision and control? That’s the promise of Drupal Canvas: a new visual builder that merges the best of what Drupal has offered so far with today’s most modern approaches and best practices.

YouTube video by WebWash

**Don’t forget to subscribe to our**YouTube channel**to stay up-to-date.** #### Boost Your Web Development Skills Get lifetime access to all premium courses, a private site builder forum, and exclusive live streams. Get Lifetime Access 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. Table of Contents Toggle * What is Drupal CMS V2? * What’s Drupal Canvas * Installation and Setup * System Requirements * Installation Commands * Drupal CMS Installation * What Are Site Templates? * Site Templates: Starter vs Byte * Mercury Theme Overview * Replacing Olivero * Design and Structure * Backend Changes in Version 2 * Gin Admin Theme * New Pages Tab * Understanding the Canvas UI * Interface Layout * Mobile and Responsive Preview * Page Data Controls * Components and Library * What Are Components? * Component Types * Managing the Library * Working with Layers and Structure * Page Structure View * Navigating Component Hierarchy * Templates * Replacing Manage Display * Template Functionality * Editing Header and Footer * Global Components * Adding a Button to Header * Modifying Footer Content * Creating Pages with Canvas * Creating a New Page * Adding Sections and Layouts * Building an FAQ Page * Working with Grid Layouts * Advanced Component Features * Accordion Components * Group Components * Webform Integration * Modifying Content Type Templates * Replacing Manage Display * Creating a Content Type Template * Linking Field Data to Components * Creating Pages with Views * Embedding Views in Canvas Pages * Creating the View * Building the Canvas Page * Single Directory Components * SDC Integration * Component Structure * Code Components vs SDC * Creating Code Components * Beyond SDC Components * Building a Code Component * Component Editor Interface * Adding the Component to Your Library * Using Drupal Canvas AI * AI Integration Overview * Setting Up Canvas AI * Using AI Features * Summary ## **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** #### Learn more about AI in Drupal CMS Want to harness the power of AI to transform your Drupal workflow? Check out the Getting Started with AI in Drupal CMS course, available as part of the WebWash Premium community. ### **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.

In a recent DrupalEasy Show & Tell, Michael Anello and Ted Bowman demoed the power of content templates in Drupal Canvas. They explored experimental features like full view mode control for nodes, field mapping to React components, and template image...

Reading Room shares key takeaways from DrupalCon Vienna 2025, spotlighting Drupal’s deepening AI integration, launch of site-building tools like Canvas and Mercury, and the community’s unwavering focus on security, collaboration, and open innovation.

Empiriecom’s Team Inspire reflects on their experience at DrupalCon Vienna 2025, highlighting sessions on Tailwind, Drupal Canvas, and AI integration. From panel discussions to real-world applications of AI in DevOps, the conference revealed a vibran...

When we launched Drupal CMS 1.0 eleven months ago, I posted the announcement on Reddit. Brave of me, I know. But I wanted non-Drupal people to actually try it. There were a lot of positive reactions, but there was also honest feedback. The most common? "Wake me up when your new experience builder is ready". The message was clear: make page building easier and editing more visual. I was not surprised. For years I have heard the same frustration. Drupal is powerful, but not always easy to use. That criticism has been fair. We have never lacked capability, but we have not always delivered the user experience people expect. Well, wake up. Today we released Drupal Canvas 1.0, a new visual page builder for Drupal. You can create reusable components that match your design system, drag them on to a page, edit content in place, preview changes across multiple pages, and undo mistakes with ease. Watch the video below. Better yet, show it to someone who thinks they know what Drupal looks like. I bet their first reaction will be: "Wait, is that Drupal?". That reaction is exactly what we have been working toward. It makes Drupal feel more modern and less intimidating. I also want to set expectations. Drupal Canvas 1.0 helps us catch up with other page builders more than it helps us leap ahead. We had to start there. But it helps us catch up in the right way, bringing the ease of modern tools while keeping Drupal's identity intact. This isn't Drupal becoming simpler by becoming less powerful. Drupal Canvas sits on top of everything that makes Drupal so powerful: structured content, fine-grained permissions, scalability, and much more. Most importantly, it opens new doors. Frontend developers can create components in React without having to learn Drupal first. And as shown in my DrupalCon Vienna keynote, Drupal Canvas will have an AI assistant that can generate pages from natural language prompts. Drupal Canvas is a remarkable piece of engineering. The team at Acquia and contributors across the community put serious craft into this. You can see it in the result. I'm thankful for the time, care, and skill everyone brought to it. So what is next? We keep building. Drupal Canvas 1.0 is step one, and this is a good moment for more of the Drupal community to get involved. Now is the time to build on it, test it, and improve it. Especially because Drupal CMS 2.0 ships in less than two months with Drupal Canvas included. Shipping Drupal Canvas 1.0 is a major milestone. It shows we are listening. And it shows what we can accomplish when we focus on the experience as much as the capability. I cannot wait to see what people build with it.

In a recent blog post, Karthik Kumar D K provides a firsthand account of Drupal’s Canvas and AI features from a non-technical perspective. The article outlines how these tools aim to simplify content management for non-developers through visual inter...

Balint Kleri’s blog post explores how Drupal Canvas enables fully decoupled frontend development using React-based Code Components, a browser-based editor, and CLI tools. From Storybook integration to Nuxt previews and server-side rendering, the guid...