---
title: "Drupal Canvas user interface"
date: "2025-07-23T05:58:58+00:00"
summary: "Explore Drupal Canvas's intuitive interface: Add elements, manage layers, and preview changes for seamless web page creation."
image:
type: "page"
url: "/acquia-source/drupal-canvas-user-interface"
id: "4472523d-b59e-4c18-b33c-a2c821c93322"
---

The following image illustrates the sections of the Drupal Canvas user interface with labels:

![Web design interface showing a homepage layout with layers, navigation menu, and SEO settings. Central text reads, "This space deserves a hero."](https://acquia.widen.net/content/a854abcc-9c28-45e6-b8ce-5c4705d42091/web/acquia-source_drupal-canvas-user-interface.svg?itok=BfnTpTUA)

The following table describes the sections labelled in the preceding image:

Label

Name

Description

A

**Library**

Displays the **Library** panel where you can access your site-specific elements that can be added to the page. The **Library** panel includes the following sections:

*   **Components**: Specific building blocks that can be used within Drupal Canvas.
*   **Patterns**: Pre-configured sets of components such as Hero areas and multi-column layouts.
*   **Code**: Components that are not promoted to the library because they are either not ready or are only being used to build other components.
*   **Overrides**: Options to customize the look of the Dynamic Components provided by the CMS.

B

**Layers**

Displays the **Layers** panel where you can inspect the structure of the page.

C

**Code**

Displays the **Code** panel where you can view and create code components.

D

**Pages**

Displays the **Pages** panel where you can view the pages of your site.

E

**Extensions**

Displays the **Extensions** panel where you can view the extensions used in your site.

F

**Exit Drupal Canvas**

Closes the Drupal Canvas user interface.

G

**Drupal Canvas AI**

Opens the Drupal Canvas AI panel.

H

**Left sidebar** 

Displays the panel based on the tool selected in the toolbar. For example, when you select the **Layers** icon, the left sidebar displays the **Layers** panel.

I

**Preview canvas**

Displays the preview canvas of the page. Use the scroll wheel of the mouse to move inside the preview canvas. Hold ⌘ Command (Mac) or Ctrl (Windows) and scroll the mouse wheel up to zoom in or down to zoom out.

J

**Page title**

Displays the title of the current page. When you click the title, Drupal Canvas opens the navigator to help you navigate to other pages and create new pages.

K

**Publishing status**

Displays the publishing status of the current page. The possible states are:

*   **Draft**: The page is not published.
*   **Published**: The page is published but has not gone through any changes.
*   **Changed**: The page is published and has gone through changes.

L

**New**

Provides the option to create a new page.

M

**Navigator**

Helps you to navigate to other pages in your site.

N

**Right sidebar** 

Helps you to configure settings for the page.

O

**Preview**

Displays the preview of the page to help you check how the page would look when it gets published.

P

**Review changes**

Opens the **Unpublished changes** panel where you can review the changes that are staged to be published. After you verify the changes, they can be published.