For years, the Drupal community has been engaged in a delicate balancing act. On one side, we have the “Structured Data Purists”—those who value Drupal for its rigid data modeling, fieldability, and API-first architecture. On the other side, we have the “Marketing Realists”—the content creators and site builders who look at tools like Squarespace, Wix, or Webflow and ask, “Why can’t my enterprise CMS be this easy to use?”
Historically, Drupal’s answer to this was a compromise. We gave you Layout Builder, which was powerful but often clunky. We gave you Paragraphs, which offered structure but lacked true visual editing. The result was often a disjointed experience where the backend power was unmatched, but the frontend authoring experience felt a decade behind.
That era effectively ends. With the release of Drupal Canvas 1.0 (formerly developed under the “Experience Builder” initiative), Drupal has finally delivered the missing piece of the puzzle. This is not just a new module; it is a fundamental reimagining of how we build, theme, and manage Drupal sites.
This guide will take you through exactly what Drupal Canvas is, what is included in the 1.0 release, and why it represents the single biggest leap forward for the platform in the modern web era.
What is Drupal Canvas?
Drupal Canvas is the new, default visual page builder for Drupal, designed to replace the aging Layout Builder and bridge the gap between “No-Code” ease of use and “Pro-Code” structural integrity.
It was born out of the Drupal Starshot initiative, which aims to make Drupal accessible to non-developers right out of the box. However, unlike previous attempts at “easy” site builders, Drupal Canvas does not sacrifice the underlying architecture. It is built on a modern React frontend that communicates seamlessly with Drupal’s core APIs.
The core philosophy of Drupal Canvas is “Visual Control with Architectural Safety.” It allows marketers to drag, drop, and style components in a true WYSIWYG (What You See Is What You Get) environment, while ensuring that every pixel they manipulate is backed by clean, reusable code defined by developers.
The End of the “Blank Screen” Problem
One of the biggest hurdles for new Drupal users has always been the “Blank Screen.” You install Drupal, and you get a plain white page. You have to build content types, configure views, and code a theme before you see anything.
Drupal Canvas flips this. When paired with the new Mercury theme (the default frontend for Drupal CMS v2) and Site Templates, users start with a fully visualized design system. They aren’t building from scratch; they are assembling experiences from a library of polished, brand-compliant components.
What’s Included in Drupal Canvas 1.0?
The 1.0 release is packed with features that target both the content editor’s need for speed and the developer’s need for order. Here is a detailed breakdown of the key components included in this release.
1. The React-Based Visual Editor
The heart of Drupal Canvas is a lightning-fast, React-based interface. Gone are the days of waiting for AJAX throbbers to spin while a block saves.
- True Drag-and-Drop: You can drag components from a sidebar directly onto the page canvas. The interface is smooth, mimicking the fluidity of SaaS site builders.
- Live Viewport Preview: The editor includes a native viewport switcher. You can instantly toggle between Desktop, Tablet, and Mobile views to see how your layout responds. This isn’t just a CSS trick; it simulates the rendering to ensure responsive integrity.
- Instant Property Editing: Click on any component—a button, a header, a card—and a sidebar opens with its properties. Change the text, swap an image, or adjust the alignment, and the canvas updates instantly.
2. Native Integration with Single Directory Components (SDC)
This is the “Architect” feature that makes Drupal Canvas revolutionary. In the past, site builders generated “magic code” that developers hated because it was hard to maintain.
Drupal Canvas is built entirely on Single Directory Components (SDC).
- One Source of Truth: A component (e.g., a “Hero Banner”) is defined in code with its Twig template, CSS, and JS all in one folder. Drupal Canvas simply discovers this component and exposes it to the UI.
- No Code Forking: When a developer updates the CSS for the “Hero Banner” in the code repository, every instance of that banner inside Drupal Canvas updates automatically. There is no separation between “Builder Components” and “Code Components.”
3. Props and Slots Architecture
Drupal Canvas introduces a standardized way to handle data, borrowed from modern frontend frameworks:
- Props (Properties): These are the settings of a component. For example, a “Card” component might have Props for Image, Title, Description, and Link. In the Canvas UI, these appear as simple form fields.
- Slots: These are “drop zones” inside a component. A “Grid” component might have four “Slots.” You can drag other components into these slots. This allows for nesting and complex layouts (e.g., putting a “Video Player” inside a “Modal” inside a “Grid”) without breaking the code.
4. In-Browser Code Editor
For the “Low-Code” developer, Drupal Canvas 1.0 includes a shocking amount of power directly in the browser.
- Edit Logic on the Fly: You can actually modify the CSS or lightweight logic of a component directly within the Canvas interface using a built-in code editor.
- JSON:API Client: The builder includes a client to fetch data dynamically. You can create a component that says “Show the latest 3 blog posts,” and configure the data fetching query right in the browser, bridging the gap between a static design and dynamic Drupal content.
5. The “Byte” Site Template & Mercury Theme
Drupal Canvas 1.0 doesn’t come empty-handed.
- The Mercury Theme: Replacing Olivero as the default face of Drupal CMS, Mercury is a modern, component-first theme designed specifically to work with Canvas. It is accessible (WCAG AA) and responsive by default.
- Byte Template: A pre-configured site template included in the release. It demonstrates the power of Canvas by providing a full “Agency” style website structure (Services, About, Contact, Portfolio) ready to be customized.
6. Multi-Step Undo/Redo & History
It sounds basic, but for enterprise teams, this is critical. Drupal Canvas maintains a robust history stack. If a content editor accidentally deletes a complex section, they can hit “Undo” (Command+Z) to restore it instantly. This safety net encourages experimentation without fear of breaking the site.
How Drupal Canvas Transforms the Workflow
The arrival of Drupal Canvas 1.0 fundamentally changes the lifecycle of a Drupal project. It solves the friction points that have historically slowed down enterprise deployments.
For the Content Marketer: “Independence Day”
The biggest winner here is the marketing team. In the pre-Canvas era, creating a new landing page usually meant filing a ticket with IT/Engineering. “We need a new layout for the Q3 campaign.”
- The Old Way: The developer builds a custom content type or template. Two weeks later, the marketer gets to enter text.
- The Canvas Way: The marketer opens Drupal Canvas. They drag a “Hero” component, a “Two-Column Text” component, and a “Sign-Up Form” component onto the page. They tweak the colors to match the campaign branding using the “Design Tokens” exposed in the UI. They hit publish.
- Result: Time-to-market drops from weeks to minutes.
For the Developer: “Governance Without Grunt Work”
Developers often fear page builders because they produce “spaghetti code” that is impossible to maintain. Drupal Canvas respects the developer’s craft.
- Focus on Components, Not Pages: Developers stop building “pages.” Instead, they build robust, accessible SDC components. Once a component is built (e.g., a complex “Pricing Calculator”), they push it to the library.
- Governance: The developer controls the constraints. They can define in the code that a “Testimonial Slider” allows for 3 to 5 slides, but no more. The Canvas UI enforces this. The marketer cannot break the layout because the code forbids it.
- Frontend Freedom: Because Canvas creates a clean separation via SDC, frontend developers can use modern tools (Tailwind, React, PostCSS) inside their components without worrying about Drupal’s legacy rendering pipeline interfering.
For the Agency/Enterprise: “Scalable Design Systems”
For large organizations managing hundreds of sites (Universities, Government, Multi-brand Corps), Canvas is a design system enabler.
- Brand Consistency: You can deploy a “Global Design System” module. Every site in the portfolio gets the same set of approved components in their Canvas library.
- Centralized Updates: If the brand color changes from Blue to Navy, you update the Design Token in the central theme. Every page built with Canvas across the ecosystem updates instantly.
The Strategic Edge – AI and Future Proofing
Drupal Canvas 1.0 is not just catching up to competitors; it is positioning Drupal to leapfrog them via the Starshot AI integration.
The AI Assistant
Demonstrated in the Driesnote and part of the roadmap for Drupal CMS v2, Canvas is designed to host AI agents.
- Generative Layouts: A user will be able to click a button in Canvas and type: “Build me a pricing page with a comparison table and an FAQ section.” The AI will select the correct components from your SDC library and assemble the page for you.
- Content Rewriting: Inside the Canvas properties panel, AI can assist in rewriting headlines for SEO or adjusting tone, directly within the visual flow.
Headless Readiness
Unlike many page builders that lock you into a specific rendering engine, the data saved by Drupal Canvas is structured. This means it can be decoupled. You can use Drupal Canvas to visually build a page, and then serve that layout data via JSON:API to a Next.js or React application on the frontend. It bridges the gap between “Visual Editing” and “Headless Architecture.”
Conclusion:
For many years, choosing a CMS was a choice between power and ease. You picked WordPress or Squarespace for ease, and you picked Drupal for power.
Drupal Canvas 1.0 eliminates the need to choose.
It provides the slick, intuitive authoring experience that modern web users demand, but it lays it on top of the most secure, scalable, and structured data engine in the world. It creates a workflow where developers can code rigorous standards and marketers can exercise creative freedom, simultaneously and harmoniously.
If you are currently running Drupal with Layout Builder, Paragraphs, or a legacy theme, the release of Drupal Canvas is your signal to start planning your evolution. The future of Drupal is not just about managing code; it’s about crafting experiences, and finally, we have the canvas to do it properly.
