Skip to content
Drupal Canvas

Contributed modules

These contributed projects extend Canvas and have at least one release on Drupal.org. They are maintained by their own authors, not by the Canvas maintainers. Check each project page for its stability, supported Canvas versions, and security coverage before you install it.

To add a project, open a merge request that edits this page. The project needs at least one release on Drupal.org.

For the more adventurous, the Canvas ecosystem on Drupal.org lists every project that declares Canvas support, including ones that are not reviewed for this page or have no release yet.

Components and design systems

Section titled “Components and design systems”
  • Canvas Bootstrap: Bootstrap 5 components, such as buttons, containers, rows, and columns.
  • Canvas Grid Section: Nestable grid and grid item components that set the layout, so other components only handle their own style.
  • Canvas Jumbotron: A jumbotron code component.
  • Canvas Map: Google Maps and OpenStreetMap components.
  • Canvas MUI Button: A Material Design 3 button code component.
  • Canvas MUI Card: A Material Design 3 card code component.
  • Canvas Palette: A kit of single-directory components inspired by Extra Paragraph Types.
  • Canvas Studio Tailwind: Tailwind CSS mappings and components for Canvas Studio.
  • DROWL Canvas: Style groups for Canvas Builder, plus button, heading, text, and image components.
  • Layout Components: Columns, rows, grids, containers, tabs, and other layout components.

Component sources and props

Section titled “Component sources and props”

Editor experience

Section titled “Editor experience”
  • Canvas Accessibility: Checks pages for accessibility issues while you edit and shows which component causes each one.
  • Canvas Builder: Background, spacing, and typography style controls for component instances.
  • Canvas Component Access: Restricts which components each user role can use.
  • Canvas Content Editor: Edits a Canvas component tree as a stream of blocks in the regular content edit form.
  • Canvas Full HTML: Enables the Full HTML text format in rich text editors.
  • Canvas Interactive Toggle: A toggle to click-test interactive components, such as tabs and accordions, in the editor.
  • Canvas Link Autocomplete: Adds Canvas pages to link field autocomplete suggestions.
  • Canvas Page Compare: A Compare tab that lists the components added, removed, edited, and moved between two versions of a page.
  • Canvas Page Weight: An editor panel that shows how heavy a page is and what to change to make it lighter.
  • Canvas Studio: A design system editor with configurable prop-to-CSS-class mappings and framework presets.
  • Canvas Styles: A form-based UI for editing design tokens, such as colors, typography, and spacing.
  • Drupal Canvas Groups: Organizes component props into configurable groups in the component form.

Pages and content templates

Section titled “Pages and content templates”

Multilingual

Section titled “Multilingual”
  • Canvas Translate: A side-by-side translation workspace delivered as a Canvas extension.

Developer tools

Section titled “Developer tools”
  • Canvas Tailwind: Shares one Tailwind build, set of design tokens, and stylesheet between a Tailwind theme and code components.
  • Code component: Exposes code components as single-directory components, so Twig templates can include them.

AI and automation

Section titled “AI and automation”