Page History

Magnolia front-end helpers are collections is a collection of JavaScript libraries that enable easy integration of single-page applications in the Magnolia Pages app. Currently, the helpers consist of the following:

Magnolia provides the following helper libraries:

• Angular editor
• React editorTwo helper renderers:
• React renderer
Angular renderer
• 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.

The helpers are available from our bitbucket repository: https://git.magnolia-cms.com/scm/modules/frontend-helpers.git

Installing and usage

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

• @magnolia/angular-editor
• @magnolia/react-editor
• @magnolia/template-annotations

For information on how to To get more information on how to install and use these helper libraries, click see the following linksREADME files available in our frontend-helpers repository:

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

On npmjs.com, the helpers have the following package names:

• Angular renderer: @robsis/react-renderer
• React renderer: @robsis/angular-renderer
• Template Annotations: @robsis/template-annotations

If you would like to try out our example Angular and React SPA demo pages,

• Angular: https://git.magnolia-cms.com/users/rsiska/repos/spa-angular-minimal/
• React: https://git.magnolia-cms.com/users/canh.nguyen/repos/magnolia-react-tutorial/

you don't need to include the helpers in them since the required dependencies are already declared in the configuration files of these minimal tutorial apps:

Angular renderer (on line 22):

...

• md

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 (hd.magnolia-cms.com).

React renderer (on line 6):

...