Page History
HTML Wrap | ||||
---|---|---|---|---|
| ||||
Related topics: |
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 renderer.editor
- React renderer.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.
Table of Contents |
---|
Installing and usage
You can add the libraries to your SPA JavaScript project by installing them as project dependencies. The libraries have the following npm package names:
@magnolia/angular-renderereditor
@magnolia/react-renderereditor
@magnolia/template-annotations
For information on how to use these helper libraries, see the following README files available in our frontend-helpers repository:
- Angular renderereditor
https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/angular-renderereditor/projects/angular-renderereditor/README.md - React renderereditor
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.adocmd
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 frameworks:
- 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/
...
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).