Magnolia 5 – Whooooooot!

Published on June 20, 2013 by Christopher Zimmermann

And without further ado, we present you: Download Magnolia 5

A collective sigh of relief as the last Selenium tests pass, the Hudson boards are green, and – we are done.

On to Magnolia 5.0.1! But wait, before charging ahead it’s a good opportunity to take a look back at the inception and development of 5.

Actually – Magnolia 4 was going to be Magnolia 5. While working on the 3x series it was already becoming clear that we needed a user interface framework overhaul. The interface worked well – but was too difficult to customize. But increasing the usability of the website templating itself took priority and the STK (Standard Templating Kit) was born with version 4.

Those old hands among you have been hearing about the elusive version 5 for a while now. Magnolia 5 was going to be launched in 2010 according to this roadmap. (From the 2009 genUIne slide presentation)


In 2009 the new UI design was presented:


Hmmm, this early design is somehow not quite so revolutionary in hindsight.

In 2010 an inverse brainstorm kicked off a new cycle of work, featuring Things that Magnolia 5 should NOT be. Inverse brainstorm?

The goal for 5 was more than a facelift, it was to build a flexible new UI foundation that would support customization. The developer team evaluated frontend UI technologies such as EXT, GWT, or custom Javascript and eventually settled on Vaadin for a variety of reasons. A key reason is that it enables a developer working with Magnolia to leverage the Java language and dev ecosystem they already know to generate the Javascript/HTML for the UI. To test the Vaadin choice we ran a sprint to build some of the tricky (and therefore risky) aspects of the UI in Vaadin. After three weeks we had some convincing results. Check out the video and notes on the proof of concept.

However, the 2011 Conference was actually cancelled (Well that’s the rumor I heard) because we realized we would not be able to deliver 5 in that timeframe. But a new round of more refined designs emerged:

In this design it’s interesting to note the beginning of some kind of apps concept on the left side, and the actionbar on the right side.

At the end of 2011 a clickable UX prototype was developed and extensive user testing confirmed many of the advantages it brought. Here we see the major metamorphosis into the apps paradigm, complete with an Apps launcher start screen. And this is when the ball really got rolling.

One advantage of having an Apps launcher is that the apps themselves can be simplified and focus more at the task at hand. Here another screen from the UX mockup.

In early 2012 that ball got momentum. An HTML prototype was built to test the interactions and implementation on touch devices. A design competition was held to select a company to do the actual graphic design, with Zurich’s atelier MUY the victor. It was a great fit, they suggested promoting the Favorites to the header, resulting in the trinity of Apps, Pulse, and Favorites.


A small developer team created the seed of an architecture to build on. More developers kept joining the team and we were able to release a developer preview of M5 in time for the 2012 Magnolia conference.

The raw shell we delivered then is now flushed out with an expanded DAM, Pulse, Favorites, a Configuration app with inline editing & drag and drop, fundamental architecture improvements, and tons more. All this packed into a sleek, simple, inviting, touch driven interface.



Marvin Kerkhoff on 20 June, 2013: Great Work! Congratulation!

Gerton ten Ham on 24 June, 2013: Great work on the coding! But now we need some effort in updating the documentation for Magnolia 5. Really missing the usage of the Imaging module combined with loading assets from the DAM and an example on how to configure the new CKEditor.

Arik on 12 July, 2013: Downloaded the 5.0.1 version yesterday and had a peek and I was delighted from what I have seen so far. Thank you for a great product.



{{item.userId}}   {{item.timestamp | timestampToDate}}

About the author Christopher Zimmermann

Christopher is a software developer and startup enthusiast with a focus on front-end web technologies. His interest in innovative UI leads to diverse experimentation from phone based GPS services, to Oculus Rift immersive experiences. He organizes the 'basel.js' javascript meetup group. Christopher is a product manager at Magnolia.

See all posts on Christopher Zimmermann