Installation¶

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:

• Entity view and entity view overrides (display_builder_entity_view)
• Page layout (display_builder_page_layout)
• Views (display_builder_views)

They can be activated from Administration > Extends (/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

Recommended modules¶

Display Builder is automatically activating its dependencies:

• UI Patterns: the engine of Display Builder
• UI Patterns Field: for the entity overrides storage
• UI Patterns Field Formatters: to format each field item in entity displays

We are also recommending:

• UI Patterns Library (from ui_patterns module): provides a nice component library
• UI Styles: to use the Styles contextual panel
• UI Skins: to use the Design Tokens contextual panel

Patches¶

Display Builder may require specific patches for its dependencies, it's recommended to ease this step using Composer Merge Plugin with this configuration in your main composer file:

composer require cweagans/composer-patches:^2 wikimedia/composer-merge-plugin:^2
composer config --json extra.merge-plugin '{ "include": ["web/modules/*/display_builder/composer.json"], "merge-extra": true }'
composer config extra.enable-patching "true"

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

cd web/libraries
mkdir -p htmx-ext-sse
cd htmx-ext-sse
npm init -y
npm install htmx-ext-sse