Drupal Canvas Paragraph Type Component
Paragraph template page
Canvas editor page

This project is not covered by Drupal’s security advisory policy.

Design paragraph layouts visually in Drupal Canvas, not just nodes.

Drupal Canvas lets you drag Single Directory Components (SDCs) onto a canvas
and map an entity's fields to component props. No Twig, no preprocess code. Out of the box,
this only works for nodes.

Most sites build pages out of Paragraphs too, using things like hero banners,
callouts, and card grids, and Canvas can't design those. Paragraph types still render through
hand-written Twig.

Canvas Paragraphs fixes that: it makes paragraph types first-class in the
Canvas editor. Design a Content Template for a paragraph type just like you would for a node,
and every paragraph of that type renders through it automatically, everywhere it's used.

Not a migration tool

This module doesn't replace Paragraphs or change your content model. It just lets you author
paragraph view modes visually with Canvas, while Paragraphs keeps working exactly as
it does today.

Features

  • Content Template tab on a paragraph type's Manage Display page, with a
    "Create with Canvas" shortcut when no template exists.
  • Full visual editing: drag components, map fields to props, preview live.
  • Paragraph Field component: renders a paragraph reference field from a parent
    node/paragraph's template. Each referenced paragraph renders through its own template, so
    designs nest as deep as you need.
  • Admin screen at Structure > Content Templates (Non-node) to open,
    generate sample content, or delete any bridged template in one click.
  • Drush commands for bulk template creation, listing bundles/templates, and
    generating sample content, handy for CI/build pipelines.
  • Enum field fix: list_string/list_integer fields
    (e.g. button variants) now map cleanly to SDC enum props, which Canvas can't normally do.
  • Clean markup: drops the default
    .paragraph.paragraph--type--X wrapper when a template is active, so your
    component's own root element (<section>, <a>, etc.)
    becomes the real DOM root. Matters for flex/grid layouts.
  • Safe by default: every template starts disabled. Nothing changes for
    visitors until you explicitly publish it in the Canvas editor.

Setup

  1. Enable it:
    drush en canvas_paragraphs
  2. Define fields on your paragraph type (Structure > Paragraph types) to
    match your design system's component props, e.g. field_heading,
    field_body, field_image, field_variant.
  3. Create a Content Template, using any of these three ways:
    • UI: Structure > Content Templates (Non-node) → pick entity type, bundle,
      view mode → Create.
    • The "Create with Canvas" button on Manage Display.
    • Drush:
      drush canvas-paragraphs:create-template paragraph hero_banner default
      drush canvas-paragraphs:create-template paragraph --all
  4. Design it at /canvas/template/paragraph/{bundle}/{view_mode}.
    No content yet? Generate placeholders:
    drush canvas-paragraphs:create-sample paragraph <bundle>
  5. Render nested paragraph fields from a node or parent paragraph template: add
    the Paragraph Field component, set field_name to your reference
    field (e.g. field_content_sections), optionally set view_mode
    (default: default).

    Same thing in Twig:

    {{ sdc_render_field('field_content_sections', 'default') }}
  6. Publish when ready. Until then, the paragraph renders as before.

Other Drush commands:

drush canvas-paragraphs:list-templates
# list all bridged templates

drush canvas-paragraphs:list-bundles paragraph
# list bundles/view modes

Roadmap

Once Canvas (core issue #3498525) natively supports an entity type, that entity's
bridge here becomes unnecessary and gets removed.

  • Phase 1 (current): Paragraphs.
  • Phase 2 (planned): block_content support.
  • Phase 3 (planned): taxonomy_term support, with admin-configurable
    bridged types.

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

Experimental, matches Canvas's own alpha status. The API and supported entity types may change
as Canvas evolves.

Supporting organizations: 

Project information

Releases