paragraph_sdc

Use Your Existing Drupal Content in Canvas

Drupal Canvas is new - everything must be created from scratch. But you already have thousands of paragraphs. This module is the bridge.

Have a lot of paragraph types? Use them in Canvas immediately.
Just drag, enter an ID, done.

The Problem

Moving to Drupal Canvas means rebuilding everything from the ground up. If you've invested years building a rich paragraph library, migration feels overwhelming:

• Content editors can't reuse existing work
• Developers must recreate components that already exist
• Site migrations stall because of the rebuild requirement

The Solution

Paragraph SDC provides Canvas components that display any existing Drupal entity.

Three powerful features:

1. Instant Content Reuse

Every paragraph, node, or entity becomes Canvas-ready. No rebuilding required.

How it works:

1. Drag paragraph-sdc onto your Canvas page
2. Enter the entity ID in the properties panel
3. Your content appears immediately

2. Contextual Editing (New in v2.0!)

Version 2.0 adds pencil icons in preview mode. Click to edit the source content in a new tab.

Your content editors get the workflow they expect - see it in Canvas, edit the original with one click.

3. Display SDCs as Paragraphs

The reverse workflow: Use any Single Directory Component (SDC) on traditional Paragraph-based pages without Canvas.

Features

Paragraph SDC Component

• User-friendly dropdown selections
• Entity types: paragraph, node, user, taxonomy_term, comment, file, block_content, contact_form
• View modes: full, teaser, rss, search_index, search_results
• Perfect for content editors

Entity SDC Component

• Free-form text inputs for maximum flexibility
• Accept any valid Drupal entity type
• Accept any valid view mode
• Perfect for developers with custom entities

SDC Paragraph Type

• Display any SDC component as a Paragraph
• Pass custom properties via JSON
• See component name and paragraph ID in collapsed summary
• No code changes needed

Contextual Edit Links (v2.0)

• Pencil icon appears in Canvas preview mode
• Click to edit original content in new tab
• Located in upper-left corner of rendered content
• Works with all entity types

Quick Start

drush en paragraphs twig_tweak
drush en paragraph_sdc
drush cr

Using in Canvas

1. Click Edit to enter Canvas Editor
2. Find Paragraph SDC under "Other" in the left sidebar
3. Drag it onto your page
4. In the Properties panel:
   • Set Entity Type to "paragraph"
   • Set View Mode to "full"
   • Enter your paragraph ID
5. Your content appears on the Canvas

In Preview mode, click the pencil icon to edit the original paragraph.

The Canvas Library showing the Components

The Property Editor for Paragraph SDC

Choosing the Paragraph Entity Type

Choosing the full View mode

Preview mode showing the Editing Pencil for editing the original paragraph

Configuring an SDC Paragraph and setting props

Also Includes

New Paragraph Routes

Version 2.0 adds /paragraph/{id} and /paragraph/{id}/edit routes - giving paragraphs the same URL patterns as other entities. These missing links bring paragraphs into the Drupal party alongside nodes, users, and other first-class entities.

Twig Template Support

Use components directly in Twig templates without Canvas:

{% include 'paragraph_sdc:paragraph-sdc' with { id: 12345 } %}

{% include 'paragraph_sdc:entity-sdc' with { 
  entity_type: 'node', 
  id: 67890 
} %}

What Users Are Saying

"Finally, contextual edit links in Canvas preview"

"Our editors can reuse content without bugging developers"

"Migrated our paragraph library to Canvas in an afternoon"

Requirements

• Drupal 10.x or 11.x
• Paragraphs module
• Twig Tweak module
• Drupal Canvas (for Canvas functionality)

Documentation

See the full documentation PDF (attached below) for:

• Finding entity IDs for any content type
• Advanced configuration options
• Developer reference
• Troubleshooting guide

Support

For issues and feature requests, please use the project's issue queue.

Installation

composer require 'drupal/paragraph_sdc:^2.0'

Screenshots

Drupal Canvas
[Screenshot 1: Canvas Editor showing Paragraph SDC in sidebar]
[Screenshot 2: Properties panel with ID field]
[Screenshot 3: Properties panel with Entity Type popup]
[Screenshot 4: Properties panel View Mode popup]
[Screenshot 5: Preview mode with pencil icon visible]

Drupal Paragraphs
[Screenshot 6: SDC Paragraph Edit Form with JSON]

Ecosystem

Works seamlessly with:

• Drupal Canvas
• Paragraphs
• Single Directory Components (SDC)
• Paragraphs Edit module
• SDC Styleguide

Note: This project is minimally maintained and considered feature-complete by its maintainers.