Manage Displays in Drupal: Canvas vs Display Builder (Part 2)

Andi Rüther 2026-04-21

When building a Drupal site, we want to control how our content looks in different contexts, e.g. the full display for standalone or the card display for overview pages. In Part 2 of this series we compare how Drupal Canvas and Display Builder handle display configuration by building a node display for a blog content type.

Canvas: Manage Displays

Add a Template

Enable the Canvas module in your Drupal site.
Navigate directly to /canvas or click the banner on the content type display page, e.g.
/admin/structure/types/manage/canvas_blog/display.
In the left sidebar, navigate to Templates.
Add a new template to your content type. ~~Currently, Canvas only supports the~~ Full ~~view mode.~~ This has been fixed in 1.3.0., Canvas now supports all node view modes.

Map Fields to SDC Props

Props have a defined data structure. So instead of using a formatter that deals with the display, the display is already defined by the component. Now we only need to feed data into the component prop.

Inside the template editor, add a component
Map each prop to a corresponding Drupal entity field (only matching data sources are shown).

On clicking the link item next to the prop label you get a nested selection with matching data. This makes mapping props in Canvas very easy.

Place Blocks in Slots

Generally slots can contain any content or (sub-)component. In Canvas we are currently limited to block plugins that don't require any context (e.g. custom blocks). Fields can't be placed in slots yet.

Ensure that each block content you want to place is enabled in /admin/appearance/component.
Place blocks (content or config) in available component slots.

Limitations

Fields cannot be placed directly into slots; try canvas_field_component module if you need this
Canvas only works with nodes

Mapping props and placing blocks in Canvas is very easy. But Canvas is not yet able to fully replace Drupal display mode management.

Display Builder: Manage Displays

Enable Display Builder for a Node Display

E.g. navigate to the display mode configuration, e.g.
/admin/structure/types/manage/hda_blog/display/card.
Select a profile. For this example, we simply use Default.

Similar to Layout Builder, you can override the display of individual entities if needed.
Click Save
Click Display Builder

This step activates Display Builder for the specific view mode. Profiles allow multiple configuration sets, so we can fine-tune the options per user role.

Place Card Component and Fill Slots

Display Builder takes over the Display configuration you had configured before enabling Display Builder. We remove these and add our card component:

Open the Library and add the card component.
My card component has several slots that I filled with fields from the node:

A configured Card Display in Display Builder

Configure Field Formatters

In Drupal field formatters are very powerful. Display Builder allows us to use them when placing fields in slots:

Click on Field: Blog Text Intro which we put in the Excerpt slot:
- In the Source dropdown, choose Formatter (other options: Processed text, Text, Text format).
- A new dropdown appears with available formatters:
  - Trimmed
  - Default
  - Component per Item (UI Patterns)
Select Trimmed to apply the desired text formatter.

Want to use smart_trim module instead? No problem, you can configure that in your Display Builder formatter settings as well.

Or drop a multi-value link-list field into a slot? Display Builder let's you select Component per Item for repeatable content structure.

Populate Props with Drupal Data

We already explained the difference between slots and props in the Canvas section. Props are defined in the component and expect a specific data type.

The nested dropdowns in Display Builder allow us to drill down the Drupal data model for each prop. By doing so Display Builder only shows data that conforms to the prop definition.

Click on the card component to open the context menu for component props.

Display Builder UI with expanded settings pane with props

The Attributes prop appears by default (added automatically by Display Builder).
Click the Title prop in the context menu.
Select the data source: Entity => Field (Alternatives: Textfield, Entity Link, Token, Referenced Entity).

Choose a field from the content type. For this example, select Title.

Drill down drupals data model in Display Builder prop mapping

Repeat this for all your props.

Key Takeaway

Display Builder integrates deeply with the UI Patterns ecosystem and Drupal's data model, so existing tools and modules continue to work without additional integration. Fields, formatters, tokens, and contributed modules such as Smart Trim all work out of the box. Any entity type is supported.

Canvas currently focuses more on editor-friendly mapping of component props rather than providing full control over Drupal display modes. Currently only nodes are supported.

In the third part we will compare both tools for building a front page layout. Subscribe to our newsletter to get notified on publication.

What About Your Next Project?

Do you have any questions on publishing workflows, streamlining site building or other Drupal issues? Get in touch with us!

Special thanks to pdureau, laurii and penyaskito for reviewing this article.

Andi Rüther

Andi has a passion to make tech work for people. When he isn't building or debugging websites, he often finds himself digesting and prioritizing customer requirements, writing documentation and designing interfaces. He has a strong drive bringing teams and projects on track quickly and checking in with everybody before things go wrong.

andi

hook-dev-alter.com