Magnolia 5.7 reached extended end of life on May 31, 2022. Support for this branch is limited, see End-of-life policy. Please note that to cover the extra maintenance effort, this EEoL period is a paid extension in the life of the branch. Customers who opt for the extended maintenance will need a new license key to run future versions of Magnolia 5.7. If you have any questions or to subscribe to the extended maintenance, please get in touch with your local contact at Magnolia.

Magnolia uses a number of third party user interface frameworks. We use them in order to create a stable but flexible framework using recent innovations.

Google Web Toolkit

Google Web Toolkit (GWT) is a user interface framework for the Web that uses an object oriented approach by taking advantage of the Java programming language. The Java source is compiled to JavaScript and run in the browser. Not all specifications from GWT have been used in Magnolia. Instead, Magnolia uses variations of GWT implementations, in particular for providing bookmarking functionality.


Vaadin is a Java Web application framework for rich and interactive applications that run in the browser. Vaadin user interfaces are modeled with components and run on the server with a corresponding component graph displayed in the browser. The client side components are implemented in GWT and communicate with the server in response to user actions.

Do I need to know Vaadin?

You can get far without knowing anything about Vaadin. The Magnolia app framework allows you to configure an app, add the app to the launcher, define components and more. But once you have done that and your app launches, it needs to do something useful. You must fill the blank space in your app with Vaadin components.

Read the  Book of Vaadin  to get started.


Syntactically Awesome Stylesheets (Sass) is a Cascading Style Sheets (CSS) metalanguage that is interpreted into CSS. SassScript is the scripting language itself. Sass uses block formatting similar to that of CSS. Braces are used to denote code blocks, while semicolons separate lines within a block. Magnolia uses the .scss syntax which is the more common one.

  • No labels