Once you picked one extension from the available Mozaïk extensions, you’ll have to activate it in your project.

Please make sure you read the specific setup instructions from the extension documentation (usually the README.md file from the dedicated repository).

This guide assumes you used the mozaik-demo repository to bootstrap your project, see setup.

Install package

First, you have to install the extension:

# using npm
npm install mozaik-ext-EXT_NAME
# or yarn
yarn add mozaik-ext-EXT_NAME

Registering the extension widgets

The demo provides an entry point to register your extensions and mount Mozaïk src/index.js, it’s the frontend part of your Mozaïk project.

// ~/mozaik-demo/src/index.js
import React                from 'react'
import { render }           from 'react-dom'
import Mozaik, { Registry } from 'mozaik/ui'
// import the extension
import EXT_NAME             from 'mozaik-ext-EXT_NAME'

// register it
Registry.addExtensions({
    EXT_NAME,
})

render(<Mozaik/>, document.getElementById('mozaik'))

Registering the extension client

If the extension provides a client, you’ll have to also register it, the entry point for the server is server.js

// ~/mozaik-demo/server.js
require('dotenv').load({ silent: false })

const path   = require('path')
const Mozaik = require('mozaik')


Mozaik.configureFromFile(path.join(__dirname, 'config.yml'))
    .then(() => {
        // you register the extension here
        Mozaik.registerApi('EXT_NAME', require('mozaik-ext-EXT_NAME/client'))

        Mozaik.start()
    })
    .catch(err => { console.error(err) })

That’s it, you can now use some of the extension widgets by adding them to the config file!