Magnolia front-end development

Magnolia gives you the flexibility to build the front-end your way. Whether you are working with modern JavaScript frameworks or FreeMarker templates, Magnolia supports both approaches.

Front-end development in Magnolia typically means building templates and components that render HTML, CSS, and JavaScript, and enabling authors to populate them with content. Projects often involve both front-end and back-end developers. Magnolia supports this collaboration by combining flexible APIs, templating options, and a file-based development model.

This section introduces how front-end development works in Magnolia and helps you choose the best starting point for your project.

Two ways to build your front-end

There are two main approaches to front-end development in Magnolia:

Headless development: Use Magnolia as a headless CMS with frameworks like React, Angular, Vue, or server side rendering frameworks such as Next.js, Nuxt, or Angular SSR. Fetch content using REST APIs and build fully decoupled, API-driven applications. Your app can live in its own repository and be deployed independently.
FreeMarker-based development: Use Magnolia’s traditional templating approach to build pages and components using FreeMarker. This is ideal for server rendered sites or when you want to build directly within the CMS with tight integration between authoring and rendering.

Tools to help you get started

Magnolia CLI: A plugin-based command-line tool to jumpstart projects, generate components and pages, and manage light modules. You can extend it with your own plugins as your project grows.
Light modules: A light module is a directory of files such as YAML, FreeMarker templates, static assets, and configuration. It’s versionable and easy to share across teams. This approach enables front-end developers to work independently from Java code.
Starter projects: Magnolia provides starter templates to help you get up and running. You can choose between headless projects, standard webapps, or demo sites with FreeMarker templates.