Magnolia U and I

The energy at DevDays 2025 was incredible, and one of the most anticipated sessions was the big reveal of Magnolia's future direction for our user interface. For those who were there, and for those who couldn't make it, we want to share the vision and the concrete steps we are taking. In his presentation, I, Christopher Zimmermann, Principal Product Manager at Magnolia, unveiled a comprehensive initiative to build a completely new UI for the platform.

This isn't just a facelift. It's a foundational rebuild designed to meet rising user expectations and create a modern, powerful, and future-proof platform for authors, developers, and businesses alike. Let's dive into the what, why, and how of this exciting transformation.

Every major evolution is driven by a need for change. Over the years, we've listened closely to our users and partners. The feedback was clear: while Magnolia remains a powerful and flexible DXP, the user experience had room for improvement.

Based on insights from our community, we identified several key drivers for this initiative:

Keeping pace with technological evolution isn't just about adopting new tools; it's about fundamentally rethinking how design and technology work together to serve people. This philosophy is the bedrock of our new UI initiative.

My presentation framed our approach around three core "ingredients" that combine to create this next-generation experience.

It all starts with a fresh, clean, and modern design concept. The sneak peeks at DevDays 2025 showcased an interface that is more intuitive and visually appealing. This new design language is the blueprint for the entire user experience, prioritizing clarity and ease of use for content authors.

To bring that blueprint to life, we're introducing the Magnolia Design System. This is where the design becomes tangible. It's a comprehensive library that translates our new design into reusable, pre-built code components. It also defines all the core visual elements through design tokens—the specific values for colors, fonts, sizes, and spacing. This system is the single source of truth that ensures consistency and dramatically speeds up development.

Finally, the new frontend is the user-facing software that's built directly with these tools. This modern, React-based interface is constructed using the components and tokens from our new Design System. For users, this means a more cohesive and performant experience. For developers, it means working with a modern tech stack that makes building and extending the UI easier and faster than ever before.

A core tenet of this new UI initiative acommitment to accessibility. We believe in building a platform that is usable by everyone, and we are making this a priority from day one, not an afterthought.
 

Our initial focus is on one of the most fundamental parts of the authoring experience: Accessible Forms. Forms are the primary interface for creating and managing content, and making them accessible is critical to empowering all users.

We have set clear and ambitious objectives for this work:

The results are already dramatic. During the presentation, we showed a comparison using the WAVE accessibility evaluation tool on our old Vaadin-based forms versus the new accessible forms. The difference was stark—a screen full of errors and alerts in the old interface became almost completely clear in the new. This represents a monumental leap forward in usability for users who rely on assistive technologies.

This commitment to accessibility is a core part of our design philosophy, and we'll be sharing a deeper look into our process and learnings in our upcoming article, "Making the Invisible Visible: A Look at Our Accessibility Work."

A complete rebuild can sound daunting, so we’ve designed a rollout strategy centered on progressive and optional adoption. We are introducing "Islands" of the new UI within the existing Magnolia instance. This means you can start using new and improved features, like the new forms, without a disruptive "big bang" migration.

The adoption process for the new accessible forms is designed to be seamless and risk-free:

This new foundation allows for more powerful and intuitive tools, helping teams better shape and scope valuable work. The benefits of this new UI initiative extend to everyone in the Magnolia ecosystem:

Ultimately, this modern foundation enables Magnolia to ship better features to you, faster.

The next-generation Magnolia UI is more than just a project; it's our vision for the future. It's a faster, more beautiful, more accessible, and more extensible platform designed for the challenges of tomorrow.

We are building this future together with our community, and you can get involved today:

Your feedback is invaluable to us as we continue on this journey. Please share your thoughts, questions, and ideas with us at feedback@magnolia-cms.com. Welcome to the new era of Magnolia.