Magnolia front-end helpers are collections 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 transforms into controls for web content editors.
Installing and usage
The helpers have the following npm package names:
- Angular renderer:
@robsis/react-renderer - React renderer:
@robsis/angular-renderer - Template Annotations:
@robsis/template-annotations
You can add these libraries to your SPA project by installing them as project dependencies, for example, through the npm install command:
npm install @magnolia/template-annotations
For more information on how to use these libraries, click the following links:
- 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
Front-end helpers in Magnolia example SPA pages
You 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 already include the required dependencies to the helper libraries.
Overview
Content Tools