Display Builder
An advanced, design-system native display building tool providing a unified alternative to Layout Builder, Block Layout, and Views display builder with modern features like real-time collaboration and dynamic previews.
display_builder
Overview
Display Builder is a sophisticated display building tool created by the UI Suite team, offering a unified approach to building displays in Drupal. It serves as a modern alternative to Layout Builder for entity view displays, Block Layout for page displays, and the Views display building feature.
The module is design-system native, allowing full integration with your design system including components, style utilities, icons, themes/modes, and CSS variables directly in Drupal without compatibility layers. It features dynamic previews using HTMX, pattern presets for reusable configurations, real-time collaboration via Server-Sent Events (SSE), and deep integration with Drupal APIs.
Display Builder uses an island-based architecture where the UI is composed of pluggable islands (panels, buttons, menu items) that can be enabled, disabled, and configured per profile. This provides great flexibility in customizing the building experience for different user roles and use cases.
Features
- Design system native: Full integration with UI Patterns, UI Styles, and UI Skins for component-based layouts
- Unified display building: Replaces Layout Builder (entity views), Block Layout (pages), and Views display builder
- Island-based pluggable UI: Configurable panels, buttons, and menu items organized into profiles
- Real-time collaboration: Multiple users can edit simultaneously with live updates via Server-Sent Events
- Dynamic previews: Live preview of changes using HTMX for seamless user experience
- Pattern presets: Save and reuse component configurations as presets
- History management: Undo/redo functionality with up to 10 history steps
- Viewport switcher: Test responsive layouts with breakpoint-based width switching
- Component library: Browse and drag-drop Single Directory Components (SDC) with grouped, variant, and mosaic views
- Block library: Access all available blocks organized by provider/category
- Contextual configuration: Configure selected components and blocks with styles, design tokens, and visibility conditions
- Keyboard shortcuts: Fast navigation and actions via keyboard (B for builder, Y for layers, P for preview)
- Layer view: Hierarchical management without preview for complex nested components
- Role-based access: Dynamic permissions per Display Builder profile
Use Cases
Building entity view displays
Use Display Builder instead of Layout Builder to configure how content types, users, or other entities are displayed. Enable display_builder_entity_view, create a profile, then go to an entity's Manage Display page and select Display Builder. Drag components from the library, nest them in slots, configure props, and apply styles.
Creating page layouts
Use Display Builder to design page layouts that replace the standard page.html.twig. Enable display_builder_page_layout, create Page Layout entities at /admin/structure/page-layout, assign them to routes or conditions, then use the builder to place components for headers, navigation, content areas, and footers.
Designing Views displays
Use Display Builder to control how Views render their output. Enable display_builder_views, edit a View, and select the Display Builder display plugin. Build the view layout with components for header, exposed filters, rows, pager, and footer areas.
Creating reusable presets
Save frequently used component configurations as presets. In the builder, right-click on a component and select 'Save as preset'. Presets appear in the Presets library tab and can be quickly dropped into any display.
Collaborative content editing
Multiple users can edit the same display simultaneously. The Collaboration island shows who is currently editing and changes are synchronized in real-time via Server-Sent Events.
Responsive layout testing
Use the Viewport Switcher to test how layouts respond to different screen sizes. The switcher uses your theme's breakpoints to resize the builder preview area.
Tips
- Create multiple profiles for different user roles - editors might need a simpler interface than site builders
- Use the Layers panel for complex nested components like accordions or modals where the preview makes drag-drop difficult
- Keyboard shortcuts speed up workflow: B for builder, Y for layers, P for preview
- Presets work well for frequently used card layouts, hero sections, or call-to-action components
- The Component Library can display components in three views: Grouped (by provider), Variants (by component with variants), and Mosaic (visual thumbnails)
Technical Details
Admin Pages 9
/admin/structure/display-builder
Main administration page for managing Display Builder profiles. Lists all configured profiles with options to add, edit, enable/disable, and delete them. Profiles define which UI islands are available and which roles can access them.
/admin/structure/display-builder/add
Create a new Display Builder profile with customizable islands configuration.
/admin/structure/display-builder/{profile}/edit
Edit an existing Display Builder profile including islands configuration. Each island can be enabled/disabled and configured with specific options.
/admin/structure/display-builder/preset
Manage reusable pattern presets that can be saved from the builder and inserted into displays. Presets store complete component configurations including slots content.
/admin/structure/display-builder/preset/add
Create a new pattern preset for reusable component configurations.
/admin/structure/display-builder/instances
View all active Display Builder instances. Instances are ephemeral state entities that track the current editing session including history, users, and unsaved changes.
/admin/structure/page-layout
Manage page layouts when Display Builder for Page Layout submodule is enabled. Create custom page layouts that can be assigned to specific routes or conditions.
/admin/structure/page-layout/{page_layout}/builder
The Display Builder interface for editing a page layout. Access the full builder UI with islands for designing page structure.
/admin/structure/views/display-builder
List all Views that use Display Builder for their display configuration.
Permissions 5
Hooks 1
hook_display_builder_provider_info
Allows modules to register display builder providers. Providers are integrations that connect Display Builder to different Drupal display systems.
Troubleshooting 4
Ensure display_builder_entity_view submodule is enabled, a profile exists with at least one role assigned, and the user has the profile permission.
Check the Component Library island configuration. Providers may be excluded, or component status (experimental/deprecated) may be filtered. Configure in the profile's island settings.
Ensure the Collaboration island is enabled in the profile and HTMX SSE library is loading. Check browser console for SSE connection errors.
History is limited to 10 steps and only available during the editing session. Enable the History island in the profile's toolbar buttons.
Security Notes 3
- Profile permissions may have security implications depending on configuration - blocks and components can execute PHP code
- Review which blocks are available in the Block Library configuration to restrict access to administrative blocks
- Entity view overrides allow per-entity customization which could impact performance if overused