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, Magnolia provides the following helper libraries:

• Angular renderer.
• React 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/templates which the Magnolia Page Editor editor transforms into controls for web content editors.

...

Installing and usage

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

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

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

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

...

Example SPA projects built with front-end helpers

...

To see how these libraries can be used, check out our example SPA projects written in Angular and React frameworksYou don't have to include the helpers manually 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/

Each of these two example SPA pages The projects already include the required dependencies to the helper libraries.