Magnolia front-end development

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.

You should also check out the new front-end developer training courses offered by Magnolia!

Video resources

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.


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

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.

Bootstrap content: Add XMLs to the JCR.


DX Core



This widget lets you know where you are on the docs site.

You are currently perusing through the DX Core docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules
6.3 beta

Magnolia 6.3 beta

Magnolia 6.3 is in beta. We are updating docs based on development and feedback. Consider the 6.3 docs currently in a state of progress and not final.

We are working on some 6.3-beta known issues during this phase.