Magnolia Freemarker Component Library

Package name

@magnolia/cli-freemarker-prototypes

Repository

Latest version

Magnolia Freemarker Component Library latest version tag

Changelog

The Magnolia Freemarker Component Library is a ready-to-use set of FreeMarker-based components built for modern, headless website development with Magnolia.

It’s designed to work seamlessly with Magnolia CLI’s Create Component plugin and Create Page plugin, helping you build scalable, customizable, and maintainable front-end applications.

For shared key features, styling information, and component usage guidelines, see the Magnolia Component Library page.

Getting started

  1. Jumpstart a Magnolia project with a FreeMarker application.

    • Community Edition

    • DX Core

    npx @magnolia/cli@latest jumpstart -t "headless/freemarker-starter/ce"
    npx @magnolia/cli@latest jumpstart -t "headless/freemarker-starter/dx-core"
  2. Next, make sure your mgnl.config.js is configured to use the Magnolia Freemarker Component Library. The most important is the framework property used by the create-page and create-component plugins:

    import CreatePagePlugin from "@magnolia/cli-create-page-plugin";
    import CreateComponentPlugin from "@magnolia/cli-create-component-plugin";
    
    export default {
      ...
      plugins: [
        new CreatePagePlugin({
          pagesSpaPath: './spa/src/templates/pages',
          framework: '@magnolia/cli-freemarker-prototypes', (1)
        }),
        new CreateComponentPlugin({
          componentsSpaPath: './spa/src/templates/components',
          framework: '@magnolia/cli-freemarker-prototypes', (1)
        })
      ],
      ...
    };
    1 The NPM package that provides the Magnolia Freemarker Component Library.

Available components

The Freemarker Component Library contains a collection of base components. Each component includes:

  • a dialog definition

  • a template definition

  • an implementation

You can customize, extend, or use them as a starting point for your own components.

Feedback

DX Core

×

Location

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

You are currently perusing through the Magnolia CLI docs.

Main doc sections

DX Core Headless PaaS Legacy Cloud Incubator modules