Versions Compared

Old Version 11

changes.mady.by.user Martin Drápela

Saved on

compared with

New Version Current

changes.mady.by.user Antti Hietala

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
HTML Wrap
alignright
classmenu

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, the helpers are available from our Bitbucket repository https://git.magnolia-cms.com/scm/modules/frontend-helpers.git, and currently consist of the following:

Magnolia provides the following helper libraries:

  • Angular editor
  • React editor
  • 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 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 For more information on how to install and use these helper libraries, click see the following linksREADME files available in our frontend-helpers repository:

On npmjs.com, the helpers have the following package names:

Front-end helpers in Magnolia example SPA pages

You don't need to include these helpers manually if you would like to try out our example Angular and React SPA demo pages:

...

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.