Canvas Palette: page builder for Drupal

Ivan Abramenko — Sat, 29 Aug 2026 11:43:00 +0000

Canvas Palette is a Drupal module that adds a collection of ready-to-use visual components to Drupal Canvas, making it possible to build modern pages without writing custom code.

It is designed primarily for site builders, editors, and developers who need a convenient visual way to assemble pages from ready-made elements: sections, columns, buttons, images, videos, galleries, tabs, accordions, sliders, and more.

Canvas Palette on Drupal.org:
https://www.drupal.org/project/canvas_palette

Live Demo:
https://drupalbook.org/canvas/editor/canvas_page/4

Canvas Palette Demo:
https://drupalbook.org/canvas-palette/demo

What Is Canvas Palette?

Drupal Canvas provides a visual approach to building pages, but a visual editor still needs a good collection of components that can be used to create real-world pages.

Canvas Palette addresses this by providing a collection of Single Directory Components (SDC) that are compatible with Canvas.

Each component is a standard SDC component. Interactive elements use lightweight JavaScript and remain editable directly in the page preview.

The idea behind the module is simple:

Don't build every page element from scratch. Build pages from ready-made components directly in the visual editor.

This is particularly useful for landing pages, marketing websites, corporate sites, documentation, and editorial projects where content needs to look modern while still following a consistent design system.

Why Use Canvas Palette?

In a traditional Drupal project, developers can create almost any content structure. However, visual page design often requires additional work: creating components, CSS, JavaScript, Paragraph types, or custom templates.

Canvas Palette moves much of this work into the visual editor.

Editors can:

Add a section
Choose the number of columns
Add text
Place an image or video
Create a CTA block
Add buttons
Build an image gallery
Add Tabs or Accordion
Create a Carousel or Slider
Display an existing View
Embed a Webform

There is no need to create a separate Paragraph type for every one of these elements.

In this sense, Canvas Palette acts as a building-block library for Drupal Canvas.

What Components Are Included?

Canvas Palette currently includes components across several major categories.

Design & Layout

The basic components for building a page structure:

Section — a universal section/container
Columns — a responsive multi-column layout
Text — headings and formatted text
Buttons & Calls to Action

Components for buttons and calls to action:

Basic Button — a configurable button
CTA — a block with an image and up to two buttons
Hero — a large banner with a heading, image, and buttons
Modal Dialog — a button that opens a modal window
Webform Popup — a button that opens an existing Webform in a popup

For example, Basic Button allows you to configure the link, colors, hover color, shape, size, and alignment.

Media

Components for working with images and video:

Image
Images
Image Gallery
Video
Video Gallery

Image Gallery can open images in GLightbox, while Video Gallery supports both local videos and external sources such as YouTube, Vimeo, and MP4.

Interactive Components & Sliders

For interactive content:

Accordion
Tabs
Carousel
Slider
Sticky Menu

Tabs use a custom implementation without jQuery. Slider is powered by Splide, while Carousel uses tiny-slider.

This makes it possible to create interactive components without introducing heavy JavaScript frameworks.

Content & Data

Components for presenting content and data:

Quote
Stats
Counter
Countdown
Tiles
Timeline

For example, Counter can be used to create animated counters, while Timeline provides a vertical timeline for events.

Drupal Integration

Canvas Palette can also work with existing Drupal content:

*Webform * — select and insert an existing form
*Views * — display an existing View with support for passing arguments

This is particularly important for real-world Drupal projects. Canvas Palette is not limited to static decorative components — it can also use existing Drupal infrastructure.

The Foundation of Canvas Palette

One of the key components in Canvas Palette is Section.

Instead of adding margin, padding, background, and border settings to every component individually, Palette uses a dedicated wrapper component.

Other components are placed inside the Section, while the Section itself controls the appearance of the surrounding area.

For example, you can create a structure like:

Section ** → **Columns → Text + Image + Button

and manage the design of the entire section from a single place.

Visual Spacing Controls

Section provides a visual DOM Box model similar to the box model available in browser developer tools.

You can configure:

Margin
Padding
Border
Border radius
Individual values for each side

This approach is much more intuitive than a collection of fields with unclear names. The visual diagram shows exactly which value applies to which side of the element.

Section Backgrounds

Section can also be used to create more sophisticated visual blocks.

You can configure:

A solid color
A gradient
A background image
An overlay on top of an image
A background video
Image position and size
Background image repetition
Overlay opacity
A fallback image for video on mobile devices

This makes it possible to create full-featured hero sections and visual content blocks directly inside Canvas.

Why SDC?

Canvas Palette is built around Single Directory Components.

This is an important architectural characteristic of the module.

Instead of creating a large number of specialized Paragraph types or Block types, each element is represented as an independent SDC component.

This approach fits well with the architecture of modern Drupal and Canvas:

Component → Configuration → Visual Editing → Final Result

Components can be used independently and combined into different compositions.

Canvas Palette and EPT / EBT

Canvas Palette grew from an idea that was already used in the Extra Paragraph Types (EPT) and Extra Block Types (EBT) projects.

EPT provides a collection of ready-made Paragraph types, while EBT provides ready-made Drupal Block types.

Canvas Palette brings a similar concept to the world of visual page builders, but uses Single Directory Components, which are native to the Canvas architecture.

This gives us three different approaches to the same problem:

EPT — ready-made components as Paragraphs
EBT — ready-made components as Blocks
Canvas Palette — ready-made components for visual Canvas editing

This makes Palette particularly interesting for projects that want to move from traditional content modeling toward visual page creation.

Building a Page with Canvas Palette

Imagine that you need to create a simple landing page.

With Canvas Palette, you could build it approximately like this:

Section
├── Hero
│ ├── Heading
│ ├── Image
│ └── Button
│
Section
├── Columns
│ ├── Image
│ └── Text
│
Section
├── Stats
│ ├── Counter
│ ├── Counter
│ └── Counter
│
Section
├── Accordion
│ ├── FAQ
│ ├── FAQ
│ └── FAQ
│
Section
└── CTA
├── Image
└── Buttons

Section can be used around a single component or an entire group of components.

This makes it possible to create nested compositions and control the design at different levels.

Do You Need to Write Code?

One of the main goals of Canvas Palette is to reduce the number of situations where an editor or site builder needs to work with code.

Ready-made components can be added and configured visually.

This is particularly useful for:

Content managers
Marketers
Editors
Site builders
Small teams without a dedicated frontend developer

At the same time, developers still maintain control over the component architecture and can create their own SDC components when the standard collection is not sufficient.

Canvas Palette is therefore not intended to replace developers.

Instead, it allows developers to create a set of building blocks in advance that other members of the team can then use.

Performance and JavaScript

Canvas Palette does not require jQuery for its interactive components.

For example:

Tabs use custom JavaScript
Accordion is implemented without jQuery
Slider uses Splide
Carousel uses tiny-slider
Modal windows use a custom implementation
Galleries use GLightbox

This makes it possible to use modern interactive components without building the entire frontend around jQuery.

Installing Canvas Palette

Canvas Palette is distributed as a regular Drupal module.

You can install it with Composer:

composer require 'drupal/canvas_palette:^1.0'

The Drupal.org project page currently lists 1.0.2 as the stable release, and the module is listed as supporting Drupal 10.3 and Drupal 11.

After installation, Palette provides components that can be used with Drupal Canvas.

What Projects Is Canvas Palette Good For?

Canvas Palette is particularly useful for projects where pages need to be created quickly while maintaining control over the visual design.

Landing Pages

Create hero sections, CTAs, images, buttons, statistics, and other marketing blocks quickly.

Corporate Websites

Teams get a ready-made component library that can be used to build new pages without constantly involving developers.

Media & Editorial Websites

Tabs, Accordions, galleries, video, quotes, Timelines, and other components make it possible to create richer editorial content.

Documentation

Combine text, images, content tables, Accordions, Tabs, and other elements while maintaining a consistent visual style.

Design Systems

Palette allows you to define a controlled set of available components, reducing the number of arbitrary design decisions editors can make.

Canvas Palette as the Layer Between Drupal and the Visual Editor

One of the strengths of the Palette approach is the separation of responsibilities.

Drupal handles content, entities, Views, Webforms, and other data.

Canvas handles visual page editing.

Canvas Palette provides the ready-made visual components that connect these two layers.

As a result, editors get a visual interface while developers retain control over the site's components and architecture.

This is especially important for Drupal projects where visual freedom needs to coexist with control over the site's structure and design system.

Conclusion

Canvas Palette is a collection of ready-made SDC components for Drupal Canvas, designed for visually building modern pages.

The module combines Drupal's familiar concept of reusable components with visual page building, allowing users to create pages from ready-made elements without manually developing every new block.

The core idea behind Palette is to give editors a ready-made palette instead of a blank canvas.

Instead of starting from scratch every time, you can select a Section, add Columns, place Text, Image, Button, Gallery, or another component, and immediately create a visually complete page.

At the same time, developers retain control over which components are available to editors and how those components are implemented.

If you are using Drupal Canvas and want to expand its standard component collection, Canvas Palette can be a good starting point for building a full-featured visual page editor.

Useful Links
Canvas Palette on Drupal.org: https://www.drupal.org/project/canvas_palette
Canvas Palette Demo: https://drupalbook.org/canvas-palette/demo
Canvas Palette Documentation: https://drupalbook.org/palette
Live Demo: https://drupalbook.org/canvas/editor/canvas_page/4

DEV Community: Ivan Abramenko