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

With Magnolia front-end development we are referring to the most common task on most web projects: developing templates to generate the actual HTML, CSS and JS of the projects - and enabling authors to populate them with content. 

Many Magnolia projects involve both front-end and back-end developers. To help you all work together in parallel, Magnolia supports both java-based modules and light modules in a single project.

A light module is just a directory of files. By relying only on simple files, the Magnolia light development approach mirrors front-end development. Front-end developers can get started right away using the tools and methodologies they already know. While back-end Java developers work on integrations and custom business logic, front-end development teams can work on templates, web resources and javascript frameworks. Front-end developers are not dependent on Java developers to integrate their work and teams can work efficiently in parallel. 

The Get started section below provides a simple introduction to working with Magnolia specifically as a front-end developer, from concepts to a little hands-on learning.

The Go further section provides some links to access in-depth information on the different subjects introduced. 

Get started

Start here to learn the essentials about working in Magnolia as a front-end developer:

Magnolia basics for front-end developers: Learn the basics about modules, templating and how to handle resource files in Magnolia.

Install Magnolia: Quickly install Magnolia using the CLI to prepare for the tutorial.

Hello Magnolia for front-end developers: Use a simple template in Magnolia and make some changes to it. 

Also check out the new front-end developer training courses offered by Magnolia!

Video resources

 Introduction to light development (9m)

Magnolia CLI Tool makes web developers' lives easier (8m)

 The world's fastest CMS for front end developers (30m)

Go further 


Light development in Magnolia: Learn how to work with Magnolia without Java programming skills.

Modules: Magnolia projects are built out of modules, learn about the different kinds of modules and their structure.

YAML: Learn about using YAML to configure Magnolia. Spaces are important.

Templating: Magnolia templating mechanism explained.


How to work with images: Learn how to handle images with Magnolia.

Creating a website with Magnolia: Create a website with Magnolia.


Magnolia CLI: Magnolia command line interface (CLI) is an npm package providing a CLI tool to setup and facilitate light development with Magnolia. 

Create light modules: Create and use a fully-functional template module.

Web resources: Access CSS, JS and other web resources.

Themes: Configure your site's visual identity.

Magnolia templating kit: Use these templates as they are or to gain inspiration to create your own.

Define template definitions: Define your blueprints for creating pages, areas and components.

Scripts and functions: Write template scripts and work with templating functions.

Define dialogs:  Define the editable content properties of your templates.

REST: Access Magnolia content using REST.

Bootstrap content: Add XMLs to the JCR.

Additional resources

Cotoolz: IDE add-on which validates input and assists when editing YAML.