Hi Magnolia

Hi Magnolia

This absolute beginner’s tutorial is an abridged version of Hello Magnolia, with the functionality limited to the bare minimum required to put together a web page using simple commands and pre-configured components.

You’ll learn what those components are and where to put them to produce this simple web page:

Page preview

You’re seeing a preview of the page on the left in Magnolia. As depicted below, you’d see green component bars when editing the page.

Editing a page


  • First, you’ll need to get Magnolia if you haven’t installed it already.

What are we going to do?

Tutorial overview

  • We’ll locate the light module folder in the Magnolia installation directory.

  • Then, we’ll add page and component templates in subfolders.

  • Next, we’ll add dialog files in subfolders.

  • Finally, we’ll create a page using the dialogs and templates from the previous steps.

  • You’ll create one folder.

  • You’ll create two folders.

  • You’ll add one file into a folder.

  • You’ll add two files into a folder.

  • Download icon You’ll need to download one file.

  • Download icon Download icon You’ll need to download two files.

Setting up templates and dialogs

Steps and explanations Folders and files
  1. Find the light-modules folder inside the Magnolia installation directory. For example purposes, let’s say you named the installation folder magnolia. The mgnl junmpstart command created the light-modules for you when installing Magnolia.

    Your Magnolia installation continually monitors the light-modules folder, and any folders or files created there are added to the definitions available in Magnolia.

The default root folder structure after installation with Magnolia CLI is below.

📁 magnolia

     📁 apache-tomcat

     📁 downloads

     📁 light-modules

  1. Creating the module folder, template folder and files.

    1. In light-modules, create a hi-magnolia subfolder and then a templates folder inside it.

    2. Create another subfolder called pages.

    3. Add both page template files Download icon Download icon, magnolia123.yaml and magnolia123.ftl.

      Page templates (files with the YAML extension) contain details about areas on a page and how pages are turned into HTML. Template scripts (ones with an FTL extension) turn those templates into final HTML page files.

📁 magnolia

     📁 light-modules

         📁 hi-magnolia

             📁 templates

                 📁 pages



  1. Creating the component template folder and files.

    1. Create a components subfolder inside the templates folder.

    2. Add the paragraph component template files Download icon Download icon inside it, paragraph.yaml and paragraph.ftl.

    3. Add the title component template files Download icon Download icon inside it as well, title.yaml and title.ftl.

      Component templates refer to single components on a page such as text, images, and links, much in the same way page templates refer to areas as a whole.

📁 hi-magnolia

     📁 templates

         📁 components





  1. Creating the dialog folders and files.

    1. Create a dialogs subfolder inside the hi-magnolia folder.

    2. Under that, create two subfolders, pages and components.

    3. Copy the component dialog files, paragraph.yaml and title.yaml, into the components folder, as depicted on the right Download icon Download icon

    4. Copy the page dialog file, magnolia123.yaml, into the pages folder, as depicted on the right Download icon

      Dialogs are how authors enter content into Magnolia. Dialog definitions specify editable fields where editors can add or update the content itself. In addition, they may define operations that authors can do on the content, for example, commit or cancel.

📁 hi-magnolia

     📁 dialogs

         📁 components



         📁 pages


Creating a page with dialogs based on templates

  1. Start up your Magnolia instance.

  2. Log in and open the Pages app.

  3. Create the page at the beginning of this tutorial, as illustrated in the short video below.

    Adding a page


DX Core



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

You are currently perusing through the Hi Magnolia docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules