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.
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, currently version15
. -
Projects can be built with that one or any later version of Angular.
-
Our
angular-sample
uses the current active version, which is .
-
-
React
-
The
react-editor
uses the oldest version with security support, currently version16
. -
Projects can be built with that one or any later version of React.
-
Our
react-sample
uses the latest version, which is .React Server Components (RSC) and NextJS App Router
Experimental support for React Server Components and NextJS App Router is available in version
1.6-experimental.6
of thereact-editor
.To learn more about this feature and to try it in a demo, see
README-nextjs-app-router.md
(in theminimal-headless-spa-demos
repository).
-
-
Vue
-
The
vue-editor
uses the current active version, which is . -
Projects can be built with version
3
of Vue. Older versions such asvue2
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:
-
To install the experimental package of the
react-editor
which comes with support for React Server Components (RSC) and NextJS App Router, see the instructions inREADME-nextjs-app-router.md
.
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).