node package manager
Love JavaScript? Your insights can make it even better. Take the 2017 JavaScript Ecosystem Survey »



License Travis CI NPM version Quality Dependencies

Mozaïk is a tool based on nodejs / react / reflux / d3 / stylus to easily craft beautiful dashboards. See demo



  • Scalable layout
  • Themes support
  • Extendable by modules
  • Grid positioning
  • Optimized backend communication
  • Rotation support (with smooth transition)

Getting started

Join the chat at

Easy way to get started is using the demo dashboard. Look at the instructions on the dedicated repository

Alternatively, use provided Yeoman generator available to start with new dashboard or widget:

npm install -g yo gulp generator-mozaik
yo mozaik
npm install
gulp build
node app.js

Visit the Wiki for further information/doc.


Widgets are maintained as separate modules, thus available via mozaik-ext-name in npm.js. To install an extension:

  • Install modules from npmjs:

    npm install --save mozaik-ext-example
  • Register widgets by adding to dashboard src/App.jsx:

    import mozaikExampleComponents from 'mozaik-ext-example';
    Mozaik.Registry.addExtension('example', mozaikExampleComponents);

    Configure size, widget placement and params in config.js:

    module.exports = {
      // ... 
      dashboards: [
        // Dashboard 1 
          columns: 2, rows: 2, // Dashboard grid layout 
          widgets: [
              type: 'example.widget_name', // WidgetName -> widget_name 
              param1: 'value1',            // See widget documentation 
              columns: 1, rows: 1,         // Size 
              x: 0, y: 0                   // Position 
  • If widget needs to communicate with backend (see widget documentation), register its client api by adding to dashboard app.js:


    If client api requires configuration, it is provided in dashboard's config.js:

    module.exports = {
      env: process.env.NODE_ENV || 'production',
      host: 'localhost',
      port: process.env.PORT || 5000,
      // Server-side client configuration. 
      // By convention, the name follow the module 
      api: {
        example: {
          foo: 'bar'
      // ... 
  • (Re)build the dashboard:

    gulp build


Mozaïk dashboard comes with 5 themes and makes it easy to develop your own theme. Set theme name in config.js:

// Options: bordeau, night-blue, light-grey, light-yellow, yellow 
theme: 'night-blue'