Magnolia front-end helpers for SPA

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

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.

Since Magnolia 6.2.6, the annotations are created on the server and can be retrieved through a dedicated Template annotation endpoint. The advantage is the server renders everything from the attributes.

For more details, see SPA template annotations endpoint.


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


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. For more information, see the Hosting the SPA page.

Example SPA projects built with front-end helpers

To see how these libraries can be used, check out our example projects. The projects already include the required dependencies to the helper libraries.

  • Minimal Headless SPA Demo - Minimal headless demo with full installation instructions (including React and Angular).

  • Hello Magnolia - SPA - Tutorial of adding components to the minimal SPA (including React and Angular). The tutorial is part of Magnolia Headless Documentation (Headless docs).

Related topics

Some topics below may take you to a different part of the docs site and away from the current headless section.