Canvas Paragraphs
Design paragraph layouts visually with Drupal Canvas — not just nodes.
Drupal Canvas brings visual, drag-and-drop page building to Drupal through
Content Templates: a site builder opens the Canvas editor, drags
Single Directory Components (SDCs) from the active theme's design system onto a
canvas, and maps an entity's fields onto each component's props — no Twig, no custom preprocess
code. Out of the box, though, that capability only covers nodes.
Most real-world sites don't compose their pages purely out of nodes. They use
Paragraphs — repeatable, structured content chunks like hero banners, callouts,
card grids, and buttons, nested inside node fields — and Canvas has no way to visually design
those at all. A paragraph type still falls back to whatever Twig template and preprocess logic a
developer wrote by hand.
Canvas Paragraphs bridges that gap. It makes paragraph types first-class
citizens in the Canvas editor: create a Content Template for a paragraph type the same way you
would for a node, design it visually, and every paragraph of that type — wherever it's referenced
across the site — renders through that design automatically.
Features
-
Adds the same Content Template tab Canvas gives node types to a paragraph
type's Manage Display page, plus a
"Create with Canvas" call-to-action when no template exists yet. -
Full visual design in the Canvas editor: drag components onto the canvas, map paragraph fields
to component props, and preview instantly. -
A Paragraph Field SDC component, so a node-level (or a parent paragraph's)
Content Template can render one of its paragraph reference fields directly on the canvas. Each
referenced paragraph is rendered through its own Content Template in turn, so designs nest as
deeply as needed (for example, a hero banner paragraph containing a slot of button paragraphs,
each independently designed). -
A dedicated admin screen,
Structure > Content Templates (Non-node), listing every bridged Content
Template with one-click actions to:- Open the template in the Canvas editor.
- Generate placeholder sample content for previewing.
- Delete the template.
-
Drush commands to create templates in bulk across every bundle of an entity type, list existing
templates and available bundles/view modes, and generate sample content. Ideal for standing up
templates across an entire site or within CI/build pipelines. -
Automatic handling of a Canvas limitation around enum-shaped fields. Canvas normally can't map
alist_stringorlist_integerfield (commonly used for dropdown-based
values such as button variants or layout widths) to an SDC enum prop. This module fixes that
transparently for paragraph fields, allowing them to be mapped directly in the Canvas editor
without additional fields or configuration. -
Removes Drupal's default
<div class="paragraph paragraph--type--X ...">wrapper whenever an active
Content Template renders the paragraph. This allows the component's own root element (such as
<section>or<a>) to become the actual DOM root, which is
especially important for CSS flex and grid layouts that expect direct children. -
Safe by default: every Content Template created through the admin UI,
"Create with Canvas", or Drush starts disabled. Nothing changes for site
visitors until the template is explicitly published from within the Canvas editor.
How to use it
-
Enable the module.
drush en canvas_paragraphs -
Define your paragraph type's fields under
Structure > Paragraph types, matching the props exposed by your design
system's components (for example:
field_heading,
field_body,
field_image,
field_variant). -
Create a Content Template for the paragraph type using one of three equivalent
methods:-
In the UI:
Structure > Content Templates (Non-node) → choose the entity type,
bundle, and view mode → Create Content Template. -
Use the "Create with Canvas" button on the paragraph type's
Manage Display page. -
Use Drush:
drush canvas-paragraphs:create-template paragraph hero_banner default drush canvas-paragraphs:create-template paragraph --all
-
In the UI:
-
Design the template in the Canvas editor at:
/canvas/template/paragraph/{bundle}/{view_mode}Drag components onto the canvas and map paragraph fields to their props. If no paragraph of
that type exists yet, generate placeholder content using either the admin screen's
Create sample content action or:drush canvas-paragraphs:create-sample paragraph <bundle> -
Render paragraph fields from a node (or parent paragraph) Content Template.
Add the Paragraph Field component to the canvas and set its
field_nameprop to the machine name of the paragraph reference field (for example,
field_content_sections). Optionally specify a
view_modeprop (defaults todefault).The same rendering is also available in Twig:
{{ sdc_render_field('field_content_sections', 'default') }} -
Publish the template when ready. Until it's explicitly enabled from within the
Canvas editor, every paragraph of that type continues rendering exactly as before.
Other useful Drush commands:
drush canvas-paragraphs:list-templates # See every bridged template that exists. drush canvas-paragraphs:list-bundles paragraph # See available bundles and view modes.
Roadmap
Canvas's own roadmap (#3498525) is expected to eventually add native support for
additional entity types. This module is architected so that once Canvas supports an entity type
natively, the corresponding bridge becomes unnecessary and can simply be removed.
- Phase 1 (current): Paragraph support.
- Phase 2 (planned):
block_contentsupport. -
Phase 3 (planned):
taxonomy_termsupport, with bridged entity
types configurable through an admin UI rather than hardcoded.
Requirements
- Drupal 10.3+ or Drupal 11
- PHP 8.3+
- Canvas (provides Content Templates)
- Paragraphs
- Field UI and Navigation (both included in Drupal core)
Project status
This module is experimental, matching Canvas's own experimental/alpha status. The API and the
list of supported bridged entity types may change as Canvas evolves.