Live show - Display Builder demo on Talk On My Machine (TOMM)
Author
G4MBINI
Tags
drupal-planet
display building
display builder
design system
Reading time
3min
Comments
https://git…

Overall summary

SparkFabrik continues to be a welcoming hub for the Drupal community, and this session was a great example of that. As part of their ongoing "Talk on My Machine" series, SparkFabrik hosted Michaël Fanini to present Display Builder — the latest addition to the UI Suite ecosystem, designed to simplify and unify the display-building experience in Drupal.

The session covered the foundations of UI Suite, its approach to connecting design systems with Drupal's architecture, and a live walkthrough of Display Builder's key features. It was a well-rounded, concrete presentation that gave the SparkFabrik audience a clear picture of where the UI Suite initiative stands today and where it is heading.

Key topics discussed

1. What is UI Suite — and why does it exist?

UI Suite is a seven-year-old open-source initiative built around a straightforward observation: while Drupal excels at content modeling, permissions, workflows, and business logic, it has long struggled to offer a comparable experience on the display side. Site builders quickly hit a wall and are forced into template overrides, preprocess functions, and custom PHP.

UI Suite's mission is to bridge that gap by connecting design systems — which are well-structured and documented by nature — directly to Drupal's architecture. The initiative is maintained by a core team of six contributors who have also made meaningful contributions to Drupal core itself, including the Single Directory Components (SDC) system, the Icon API, and the Asset Library subsystem.

Today, UI Suite maintains 10 projects (6 modules, 4 themes) with over 15,000 installations, and a growing sub-community of more than 400 members on Slack.

2. How UI Suite connects design systems to Drupal

A design system is made up of many parts — components, grid and layout systems, style utilities, icon packs, CSS variables, and more. UI Suite provides a dedicated API and Drupal modules for each of these parts:

  • UI Patterns → connects components (via SDC) to Drupal display plugins
  • UI Icons → connects icon packs to the Icon API introduced in Drupal 11.1
  • UI Styles → connects style utilities to Layout Builder, Manage Display, CKEditor, and more
  • UI Skins → connects CSS variables and design tokens for runtime theming

The initiative's roadmap includes progressively integrating these APIs into Drupal core, with the goal of making Drupal a fully design system-native CMS.

3. Why Display Builder was created

Even with all the UI Suite modules in place, Drupal's display-building surface remains fragmented. Depending on the task, site builders must navigate different tools — Block Layout for page regions, Layout Builder for entity displays, Views for listing pages, and so on. This creates an inconsistent and sometimes confusing experience.

Display Builder is UI Suite's answer to that fragmentation: a unified visual builder that brings all the UI Suite plugins together into a single, coherent interface, covering every display context in a Drupal site.

4. Live demo highlights

The heart of the session was a live demo that walked through Display Builder's main features — a format that SparkFabrik's hands-on audience clearly appreciated. Here is what was covered:

Page Layout Management — A page layout was built for user profile pages using drag-and-drop, with styles applied directly from the interface — no template files required.

Profile Configuration — Display Builder supports multiple profiles, allowing the interface to be tailored to different user roles. A simplified "marketer" profile can expose only a curated set of components and options.

Migration from Layout Builder — When Display Builder is activated on a content type that already uses Layout Builder, the existing layout is automatically imported, enabling a smooth and incremental adoption.

Pattern Presets — Sections or component groups can be saved as reusable presets and applied across different display contexts, with built-in awareness of what is compatible in each context.

Entity Overrides — Display Builder supports per-entity overrides, and takes it further than Layout Builder by allowing overrides across all view modes (full, teaser, etc.), not just the default display.

Views Integration — Display Builder can be activated directly on a Drupal View, bringing the same visual building experience to listing pages as to any other display context.

Real-Time Collaboration — The demo closed with a feature powered by HTMX: two users editing the same display simultaneously, with changes reflected in real time and an activity log tracking each contributor's actions.

5. Where UI Suite is Headed

Display Builder is the latest piece in a broader, long-term effort to make Drupal a platform where design and content configuration meet naturally. With SDC, the Icon API, UI Styles, UI Skins, and now Display Builder all in place, the UI Suite ecosystem is maturing into a coherent, practical solution for Drupal teams who want a proper low-code display experience.

SparkFabrik, with its deep roots in open-source and its commitment to sharing knowledge across the Drupal community, is exactly the kind of environment where these conversations belong. Thanks to their team for making space for this kind of practical, community-driven exchange.