UI Suite Monthly #32 - Display Builder Beta 1 Launch, Core Integration Progress and AI-Powered Component Generation

Overall Summary

Our November monthly meeting showcased significant progress across the UI Suite ecosystem as we edge closer to major milestones. The star of the show was Display Builder, with beta 1 finally ready for release after strategic delays to align with Drupal 11.3 alpha 1. We demonstrated exciting real-time collaboration features that allow multiple users to build displays simultaneously. The meeting also covered our ongoing migration from UI Patterns 1 to 2, with a new automated conversion tool now available. Perhaps most intriguing was the introduction of AI-powered component generation through what we're calling "UI Suite AI" - a community-driven approach to creating shared AI agents that understand our design system patterns. We're making substantial progress on moving more of our functionality into Drupal core, with Style API and Design Token API both in active review for Drupal 11.3.

Key Topics Discussed

Display Builder Beta 1 Release

We're thrilled to announce that Display Builder beta 1 is finally ready to launch after several strategic delays. Originally planned for mid-September, we pushed the timeline to incorporate security improvements and agency feedback gathered during September meetings. The most recent delay was actually a positive decision - we chose to align with Drupal 11.3.0 alpha 1, which was released in November with features too valuable to skip.

Beta 1 will require only two dependencies: Drupal 11.3 alpha 1 with two small patches (which will land in 11.3 very soon) and the latest release of UI Patterns. We successfully demonstrated the real-time collaboration feature during the meeting, showing how multiple users can simultaneously edit the same display with all changes syncing in real-time. Users can see who else is connected and track what changes each person makes through an activity log.

Our roadmap beyond beta 1 is clear: beta 2 will focus on translation with some very exciting features planned, beta 3 will concentrate on UX and UI improvements, and before the stable 1.0 release, we'll conduct thorough accessibility testing. This is just the beginning of what Display Builder will become.

Core Integration and Schema References

We're making tremendous progress on reducing UI Patterns' footprint by moving functionality into Drupal core. Currently, about 50% of UI Patterns 2's mechanisms are in core thanks to SDC. Our goal for next year is to push that to 75% by moving reference handling and prop types into core, as the Type Data API is now JSON-friendly.

A major breakthrough is coming with Drupal 11.3 regarding JSON schema references. We're introducing a Drush command to help convert themes away from UI Patterns-specific references. Eventually, themes will be able to copy the schema.json file directly into their codebase and reference their own theme instead of the patterns module. This makes themes truly agnostic and compatible with any SDC tool. The next step may be moving common schemas to Drupal core modules so the entire ecosystem can share the same dependencies.

UI Patterns Migration Tools

After 11 months since UI Patterns 2.0 was released, we've finally merged a complete configuration upgrade path into the module. The migration happens in two steps: first, you update your codebase using the Drush command drush ui-patterns:migrate-your-extension to convert from patterns to components, potentially adjusting generated code. Second, you run the standard drush updatedb, which triggers our update hooks that scan all configuration for UI Patterns 1 usage and automatically convert it to UI Patterns 2 format.

The converter handles configuration changes for field layouts, field groups, Display Suite, Layout Builder, field formatters, layouts, UI Patterns blocks, and more. If your use case isn't covered yet, create an issue with your UI Patterns 1 configuration and what the expected UI Patterns 2 configuration should look like, and we can adjust the converter service. We're also providing the configuration conversion as a separate Drush command for flexibility.

Style API and Design Token API for Core

Our Style API and Design Token API merge requests for Drupal 11.3 are in active review and getting close to RTBC status. The Style API unifies what we previously had separated in UI Styles (utilities and helper CSS classes) and UI Skins (theme selection like light/dark modes). Now styles can be any kind of attributes and values, not just CSS classes, and you can specify targets and whether styles are scopable.

The Design Token API leverages the Design Tokens Community Group format standard, which is still in draft but provides an industry-standard approach outside the Drupal community. This means design tokens will be exportable from design tools like Figma and importable into Drupal. We're using config entities to specify scopes and value overrides, with plugin support for different token types (dimension, font family, font weight, colors, etc.) and composite tokens like typography.

We've already implemented several token types in the current merge request, with plans to add more in future minor versions. The system will include token reference resolution, similar to SDC schema references. Both APIs are very close to merging - we need more people willing to give RTBC status or provide feedback if they're not core maintainers.

Canvas Kit Compatibility Progress

We're seeing improvement in Canvas Kit compatibility. Last month we identified several breaking issues with Canvas Kit's SDC implementation, but we're happy to report that two issues have already been fixed on their side, along with one related core issue. We collaborated with the Canvas team in Vienna, and they're aware of the remaining problems and working on fixes before their 1.0.0 release.

On our side, we're considering handling the temporary stream wrapper they're using and potentially adding support for the prop types and shapes they use, even though we believe some of their prop shapes are mistakes. If we want to increase compatibility with Canvas Kit, we may need to accommodate these patterns. We're optimistic that Canvas Kit will become much more SDC-friendly in the coming weeks.

AI-Powered Component Generation Initiative

Rajab Natshah from Vardot introduced an exciting new initiative around AI-powered component generation. The concept builds on experiments by Vit (who created a blog about gathering Drupal components with Figma) and Ivan's work integrating with Drupal Canvas. The challenge is that everyone is creating their own isolated prompts and AI agents - we need these to be public and community-managed.

The vision is to create shared "AI context" or "AI skills" - a repository of AI agents that think like our community's design system experts. These agents would help with generating components, improving UX, managing design systems, and assisting designers. Rather than each company maintaining personalized prompts, we'd have community-maintained agents that junior or mid-level developers could use to build themes following our established patterns.

The question we're exploring is where to host this: within the modules, within themes, or in a dedicated repository. The UI Suite initiative repository could potentially hold this collection of smart agent prompts. We'll be sharing these prompts in our public Slack channel and aim to have a demonstration at next month's meeting.

UI Patterns Recipe for Quick Setup

We demonstrated a new Drupal recipe that provides a complete starter setup for the UI Patterns ecosystem. Previously, getting started with UI Patterns required manually installing and configuring many submodules and contrib modules. Now, you simply require the recipe via Composer and apply it using drush recipe:apply, and you get a ready-to-use environment with all UI Patterns modules enabled, including Display Builder.

The recipe is already available on Packagist with a complete README explaining installation. We're discussing whether this recipe should live directly in the UI Suite repository or have its own dedicated Drupal.org project. The consensus is leaning toward a separate project so it can evolve independently, especially if we later add AI agents or additional configurations that would make more sense in a dedicated space.

Key Action Points

For the Community:

Try Display Builder beta 1 as soon as it's released (announcement coming in the Components and UI Suite Slack channels). We need your feedback on this major milestone. If you want a private demo or have questions, reach out to Pierre, who's always available to provide demonstrations and support.

Review the core merge requests for Style API and Design Token API. We're close to merging but need more people willing to give RTBC status if you're a committer, or provide detailed feedback if you're not a core maintainer. These APIs represent a huge step forward for design system support in Drupal core.

For UI Patterns 1 Users:

Start planning your migration to UI Patterns 2 using the new automated conversion tools. The two-step process (codebase update with Drush command, then configuration migration with drush updatedb) should make the transition much smoother than doing it manually. If you encounter any use cases not covered by the converter, create an issue with your configuration examples.

For Theme Developers:

Prepare for the upcoming JSON schema reference changes coming in Drupal 11.3. Once the stream wrapper support lands in core, you'll be able to use the Drush conversion command to make your themes fully agnostic of UI Patterns. Consider copying schema.json files into your themes to break free from pattern dependencies while maintaining compatibility with all SDC tools.

For AI and Tooling Enthusiasts:

Join the conversation about AI-powered component generation in our Slack channels. Share your prompts, agents, and experiments with the community. We'll be coordinating where to centralize these resources (likely a dedicated repository) and how to structure them so they're beneficial for everyone from junior developers to senior architects.

For Contributors:

Check out our issue queues across UI Patterns, Display Builder, UI Styles, and UI Skins. Some issues are already tagged for specific beta phases and prioritized, while others need attention. There's space for all kinds of contributions, from code to documentation to testing.

Upcoming Deadlines / Releases

We're entering an incredibly exciting phase for the UI Suite ecosystem. With Display Builder reaching beta status, major APIs heading into Drupal core, and innovative approaches to AI-assisted development, we're closer than ever to making Drupal the first true design system CMS. Join us in the #components and #ui-suite Slack channels to stay updated and contribute to these efforts. See you at the next monthly meeting on January 8, 2025!