Skip to content

Installation

Drupal 11.4+

Display Builder targets Drupal 11.4+. No previous version of Drupal support is planned.

It also requires PHP 8.3+ and UI Patterns 2.0.21+.

Like any other Drupal module, it is recommended to use composer:

composer require drupal/display_builder

Display Builder is split in sub-modules, one for each Drupal Core's display buildable:

They can be activated from Administration > Extend (/admin/modules) or with Drush:

drush -y en display_builder_entity_view display_builder_page_layout display_builder_views

You can also install Display Builder UI to configure Display Builder:

drush -y en display_builder_ui

With the module installed, follow Build your first display to build a display end to end.

Display Builder is automatically activating its dependencies:

The sub-modules activate their own dependencies too:

  • Entity view (display_builder_entity_view): Field UI, and UI Patterns Field Formatters to format each field item in entity displays
  • Views (display_builder_views): Views, and UI Patterns Views

We are also recommending:

  • UI Styles: to use the Styles contextual panel
  • UI Skins: to use the Design Tokens contextual panel

Local libraries

Display Builder relies on Shoelace component library, and HTMX sse extension.

By default libraries are loaded with CDN, but you can switch to local copies with drush:

drush state:set display_builder.asset_libraries_local true
drush cache:rebuild

And switch back to CDN mode with drush:

drush state:delete display_builder.asset_libraries_local
drush cache:rebuild

Currently asset.packagist provides a version of Shoelace with Lit dependencies.

Installation with package manager is recommended.

From your installation libraries folder (web/libraries or app/libraries):

mkdir -p shoelace
cd shoelace
npm init -y
npm install @shoelace-style/shoelace

Then, back in the libraries folder:

cd ..
mkdir -p htmx-ext-sse
cd htmx-ext-sse
npm init -y
npm install htmx-ext-sse