Templates are blueprints for creating pages, areas and components. When you add a page in the Pages app you must choose a template.

A template consists of:

Template definition


A template definition gives a template a name and makes it available to the system. At a minimum a template definition must specify a script and a renderer.

Template script


A template script defines the output (typically HTML) and is interpreted by Renderer. The script is written in a templating language such as FreeMarker.

In the context of developing Single-page applications, the elements comparable to FreeMarker template scripts are components, which are compiled into a single HTML page. On the Magnolia side, the rendering of the page is handled by the SPA renderer.

Dialog definition


A dialog is a pop-up featuring some content and actions to conduct some operations on that content. It contains a head (title), content (typically forms) and a footer (mainly action controls).



The model is a JavaBean implementing RenderingModel. Use it to implement complex logic. The model can execute any Java code to retrieve data from the repository or from an external source. The results are available to the template script for rendering on the page.

In the context of developing Single-Page Applications, templating takes form of creating Angular or ReactJS components, which are compiled into a single HTML page. For more details, see:

Elements of the Magnolia template mechanism


The diagram abbreviates the field class as i.m.u.f.f.d.TextFieldDefinition to save space. This is not a valid value. Use fully-qualified field class names such as info.magnolia.ui.form.field.TextFieldDefinition in your definitions.

The Magnolia CLI speeds up template creation for light developers. The tool provides commands that automatically create basic template definitions and scripts on the file system.