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. |
Installing
You can add the libraries to your JavaScript project by installing them as project dependencies. The libraries have the following npm package names:
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).