Page History
HTML Wrap | ||||
---|---|---|---|---|
| ||||
Related topics: |
Magnolia front-end helpers
...
For easy integration with the Magnolia Pages app, we provide a collection of helper JavaScript libraries available in the Front-end helpers module:
- Magnolia React Renderer
- Magnolia Angular Renderer
- Magnolia Template Annotations
The renderers take care of rendering SPAs and facilitate rendering of template annotations.
is a collection of JavaScript libraries that enable easy integration of single-page applications in the Magnolia Pages app.
Magnolia provides the following helper libraries:
- Angular editor
- React 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 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 use these helper libraries, see the following README files available in our frontend-helpers repository:
- Angular editor
https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/angular-editor/projects/angular-editor/README.md - React editor
https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/react-editor/README.md - Template Annotations
https://git.magnolia-cms.com/projects/MODULES/repos/frontend-helpers/browse/packages/template-annotations/README.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).
...