Experience Builder
Lauri Timmanee
Product Lead for �Experience Builder (Acquia)
Part of the Drupal community for 14 years.
Led the development of the Drupal Core Admin Theme Claro.
Agenda for today
“Drupal CMS strives to be the gold standard for no-code website building”
Dries Buytaert
What is the Experience Builder?
Drupal CMS Epics
Experience Builder is a low-code editor for:
Creating content and pages
Building components
Managing site design
Editing Site
Visually
You have enabled Experience Builder on your site.
Clicking Edit Site launches the Experience Builder.
Component driven site building
Component Library
Build new pages from a library of drag-and-drop components using the Experience Builder.
Component driven site building
Experience Builder Components come from several sources
Text
Link
Style
name: Button
status: experimental
group: Atoms
props:
type: object
properties:
text:
type: string
title: Text
description: Button text.
examples:
- Learn more
url:
type: string
title: Url
description: URL for the link button.
examples:
- 'https://drupal.org'
display:
type: string
title: Style
description: Button style.
enum:
- primary
- secondary
- link
- link-alt
examples:
- primary
Component
{% set display_class = 'starshot-button--%s'|format(display|default('primary')) %}
<div class="starshot-button {{ modifier_class }}">
<a href="{{ url }}">{{ text }}</a>
</div>
Markup
name: Button
status: experimental
group: Atoms
props:
type: object
properties:
text:
type: string
title: Text
description: Button text.
examples:
- Learn more
url:
type: string
title: Url
description: URL for the link button.
examples:
- 'https://drupal.org'
display:
type: string
title: Style
description: Button style.
enum:
- primary
- secondary
- link
- link-alt
examples:
- primary
Component
Experience Builder
Component driven site building
Defining
Brand
Easily apply global design and branding updates using Brand Kits within the Experience Builder.
Component driven site building
Content Creation
Create new pages and navigate to existing pages without leaving Experience Builder.
Optimized for marketers
Fast content creation using sections and components.
On demand generated previews for components and sections.
Undo / Redo. Copy and Paste.
Ready to publish
Final review for the changes that are going to be published.
Component driven site building
Global regions
Double click the header or the footer and it opens up a focus mode to edit that across the whole site.
Global regions
Double click the header or the footer and it opens up a focus mode to edit that across the whole site.
Use Blocks + Components
Global regions can be built directly in Experience Builder by using Components and Blocks.
Component driven site building
| Structured Content | Pages |
Focus | Reusable content | Visual presentation |
Reusability | High (can be used in multiple places) | Low (typically unique per page) |
Flexibility | Low | High |
Management | Data-centric | Layout-centric |
Structured Content vs. Pages
Text
Link
Style
Inline Content
Dynamic Source
Entity System Field
External API
Page templates
Use components to build consistent displays of content.
Photo: https://www.pexels.com/@junior-teixeira-1064069
Extensions
Module Extensions
Modules can integrate with Experience Builder with JavaScript.
Module Extensions
Modules can integrate with Experience Builder with JavaScript.
React + Form API
Experience Builder is built with React, but the form structures are defined in Form API.
This allows many of the existing modules to work without modification.
Photo: https://www.pexels.com/@junior-teixeira-1064069
Migrations
Key principle 1:
Key principle 2:
"Avoid forcing existing sites to migrate as long as possible"
"Provide an easy way for all sites to benefit from Experience Builder"
Approach
Approach
Experience Builder Components come from several sources
Approach
Mockup
Photo: https://www.pexels.com/@junior-teixeira-1064069
Where are we today?
Goals: test market fit, validate UX.
Target archetype: Drupal Developers
Timeline
Launch!
4 Months
3 Months
🚀Stable release
Q3 2025
✅Demo
Early preview 1
Almost there!
Goals: be the default experience for Drupal CMS
*All dates are aspirational and depend on open source contributors
Goals: start building ecosystem on top of Experience Builder
Target archetype: Front-end Developers and Content creators
1.1 release
Q4 2025
3 Months
Goals: gain adoption from non-technical marketers and designers
Target archetype: Designer
3 Months
Early preview 2
Goals: allow Drupal CMS users to test XB to build landing pages��Target archetype: Content creators
How can I help?
Provide feedback on the vision
Help with an issue or help lead a track
Start building SDC based design systems
Drupal Experience Builder Mission Statement
Drupal’s new experience builder will 1) enable site builders without Drupal experience to easily theme and build their entire website using only their browser, and 2) it will enable content creators to compose content on any part of the page without relying on developers.
Unlike competing tools, it will be better for content re-use across channels and managing content at a large scale because it will enforce data and design consistency.
Get involved!
Drupal.org project d.o/project/experience_builder
Drupal Slack�#experience-builder
Q&A
Thank you!