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
Top comments (0)