Drupal: exploring Canvas (part 1)

Source: Dev.to

Introduction

Not long ago the first version of Canvas was released. For those outside the Drupal community, Canvas is a new visual page‑creator module.

Most CMS users are accustomed to a form‑based interface for building pages, which often requires extra training because there is no visual connection to the content being added. Historically, a preview button has been provided to mitigate this issue.

The previous visual page creator in Drupal was the Layout Builder. Its main limitation was that you still needed the form to edit page metadata. A visual interface that combines the form with the visual layout represents the next step in improving the user experience.

The Quick Edit module also adds visual editing capabilities, but it focuses on inline, localized edits rather than full page building.

Installation and First Impressions

A demo repository is linked at the bottom of the release article, but I preferred a clean environment. I created a fresh Drupal 11.20 project and installed only the Canvas module.

The module adds a Components tab under Appearance. I found this placement odd, as I expected it to live under Structure, where other page‑building options reside.

The admin top menu also gains a Drupal Canvas link, and a Pages tab appears in the Content section.

Curious about the underlying storage, I inspected the database and found Canvas‑specific tables, indicating that Canvas operates parallel to the traditional node system rather than as a visual layer on top of it.

Note: Because Canvas does not rely on node tables, it offers greater flexibility, but it also raises questions about how it will coexist with the well‑tested node architecture. For sites that use only Canvas pages, nodes could become unnecessary overhead.

Using Canvas

When accessing the Drupal Canvas link on a small screen, a warning appears that the browser window is too narrow, meaning page building on smartphones is currently unsupported.

On a desktop, the initial Canvas view looks like this:

• The left icon returns to the admin interface.
• The top toolbar follows the Drupal design language (using the Gin admin theme).
• The central dropdown, called the navigator, provides page‑level controls.
• The right‑most button saves the page.

Navigator and Page Creation

Clicking the navigator reveals its purpose. When creating a new page, the interface updates:

• The navigator text changes, and a Draft pill appears.
• An option to resize the page is available at the top left of the content area.
• The content area mirrors the Block layout found in the Structure section, confirming that the Components tab arguably belongs under Structure rather than Appearance.
• A square placeholder invites you to drop content blocks.
• A Page data toolbar appears on the right side.

This integrated page‑data toolbar is a feature that the core Layout Builder lacks.

Saving a Canvas Page

To verify that Canvas does not modify node tables, I edited the page title and saved the page.