Mapping between Magnolia and SPA components

Components developed in a front-end framework must be correctly linked to their Magnolia counterparts through mappings. The mappings are:

  • A JavaScript object containing entries whose key is the template id string, and whose value is a direct JavaScript reference to the component type.

  • Passed to the Magnolia JS libraries to render content.

  • Stored in the front-end project, close to component implementations.

Example component mapping

Below is an example Magnolia template definition of a component called headline, and their respective JavaScript (TypeScript) mappings in Angular and ReactJS components.

To create a mapping, the important thing is the Magnolia template id of the template, a combination of the module name and the template path.

For the following template definition, the Magnolia template id is spa-lm:components/headline


title: Headline
dialog: spa-lm:components/headline

Mapping between Magnolia and Angular


  export const config = {
    'componentMapping': {
      'angular-minimal-lm:pages/basic': BasicComponent,
      'angular-minimal-lm:pages/contact': ContactComponent,

      'spa-lm:components/headline': HeadlineComponent,
      'spa-lm:components/image': ImageComponent,
      'spa-lm:components/paragraph': ParagraphComponent,


Additionally, to set the mappings, setComponentMapping() must be called on the EditorContextService:



Mapping between Magnolia and ReactJS


const config = {
        'react-minimal-lm:pages/basic': Basic,
        'react-minimal-lm:pages/contact': Contact,

        'spa-lm:components/headline': Headline,
        'spa-lm:components/image': Image,
        'spa-lm:components/paragraph': Paragraph,

Additionally, to set the mappings, the config object must be passed through the config argument of the`<EditablePage/>` component:


import config from '../magnolia.config';
<EditablePage templateDefinitions={templateDefinitions} content={content} config={config}>