Page History

...

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

Currently, Magnolia provides the following helper libraries:

• Angular editor.
• React 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.

Installing and usage

...

• Angular editor
  https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/angular-editor/projects/angular-editor/README.md
• React editor
  https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/README.md
• Template Annotations
  https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/template-annotations/README.md

Example SPA

...

projects built with front-end helpers

To see how these libraries can be used, check out our example projectprojects. 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)

...

Minimal Headless SPA Demo

...

• .
• Hello Magnolia - SPA - Tutorial of adding components to the minimal SPA (including React and Angular

...

Hello Magnolia - SPA

...

• ). The tutorial is part of Magnolia Headless Documentation (hd.magnolia-cms.com).