Magnolia 5.3 reached end of life on June 30, 2017. This branch is no longer supported, see End-of-life policy.

Page tree
Skip to end of metadata
Go to start of metadata

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.

Where is Vaadin used?

Vaadin elements are used by many Magnolia components directly. A number of Magnolia specific elements have also been implemented specifically for app development.

  • Simple fields such as Text are Vaadin fields. The factory class of the field creates a Vaadin TextField directly. 
  • Tree and list views use Vaadin Table and TreeTable.
  • Thumbnail view uses a Vaadin data Container.
  • Dialogs use Vaadin Panels
  • Image editor uses a Vaadin Image.
  • Context menu uses a Vaadin ContextMenu.
  • etc.


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.