Page History
HTML Wrap | ||||
---|---|---|---|---|
| ||||
Related topics: |
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.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 either by installing them using the npm install command,
Mgnl mini code snippet | ||
---|---|---|
| ||
npm install --save @magnolia/template-annotations |
or by including them as project dependencies.The helpers The libraries have the following npm package names:
@magnolia/angular-editor
@magnolia/react-editor
@magnolia
- Angular renderer:
@robsis/react-renderer
- React renderer:
@robsis/angular-renderer
- Template Annotations:
@robsis/template-annotations
For 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
...
Example SPA projects built with front-end helpers
...
You don't need to include these 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/
...
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).