Magnolia front-end SDK

Learn what’s new and changed in the Frontend SDK v2.

Magnolia front-end helpers version 2.0.0 has been released. However, most of this page’s information and subpages still refer to version 1.0.0.

We’re actively working on updating these pages for the latest version.

Magnolia front-end helpers is a collection of JavaScript libraries that enable easy integration of single-page applications in the Magnolia Pages app.

Magnolia provides the following helper libraries:

  • Angular editor

  • React editor

  • Vue editor

  • Magnolia Template Annotations (For usage with the v1 libraries.)

  • Frontend Helpers Base (For usage with the v2 libraries.)

The annotations make content from a front-end project editable in Magnolia. This is achieved by injecting annotations (HTML comments) around components which the Magnolia Page editor transforms into controls for web content editors.

The original name of this page was Magnolia front-end helpers for SPA. We’ve decided to rename it to Magnolia front-end SDK to match it with the broader scope and functionality of the v2 helper libraries.

Supported framework versions

Our policy is to use the oldest LTS versions (or oldest versions with security support) of the frameworks in our frontend libraries. This ensures that projects that use the older versions are still supported.

As to our sample projects, we aim to use the latest active versions of the frameworks to make sure that our libraries are forward-compatible.

  • Angular

    • The angular-editor can use the oldest version of the LTS release.

    • Projects can be built with that one or any later version of Angular.

    • Our angular-sample uses the current active version, which is Angular framework version - current active version.

  • React

    • The react-editor uses the oldest version with security support, currently version 16.

    • Projects can be built with that one or any later version of React.

    • Our react-sample uses the latest version, which is React framework version - the latest version.

  • Vue

    • The vue-editor uses the current active version, which is Vue framework version.

    • Projects can be built with version 3 of Vue. Older versions such as vue2 are not supported.

NodeJS versions

For compilation of libraries and testing the samples, we use the latest LTS version of NodeJS.

Java versions

To see which Java versions you can use for your Magnolia instances, please see the Java section on our Certified stack page.

Installing

You can add the libraries to your JavaScript project by installing them as project dependencies. The libraries have the following npm package names:

The v2 libraries come with breaking changes. See the details on the Breaking changes in v2 helper libraries page.

Usage

For information on how to use these helper libraries, see the following subpages:

Externally hosted SPA

The helpers also provide means for contexts where an SPA is running on a remote server.

Example SPA projects

Projects built with v2 front-end SDK libraries

To see how these v2 libraries can be used, check out our starter projects. The projects already include the required dependencies to the front-end SDK v2 libraries.

Older demo projects using v1 front-end helper libraries

Feedback

DX Core

×

Location

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