Introduction
MoBro is a modular application that can be extended using plugins and widget packs.
While plugins provide data, widget packs visualize it: a widget pack is a collection of widgets that users place
on their dashboards and configure in the dashboard builder.
Every widget is a React component written in TypeScript. How a widget looks and what users can configure is entirely up to you.
Users install and manage widget packs directly from MoBro through the built-in Marketplace.
Quick Start
Get started immediately by building your first widget pack. Follow the step-by-step instructions in the Getting Started guide.
How Widget Packs Work
- A widget pack is shipped as source code, not as a pre-built bundle. MoBro compiles it on the user's PC.
- The dashboard provides React, the Dashboard SDK and a fixed set of libraries to all widgets at runtime.
- Widgets run inside the dashboard, wherever the dashboard is displayed. They receive metric values provided by plugins and can trigger actions provided by plugins.
For the details, see In-depth: Build and Dependencies.
Widget packs cannot use npm packages other than the ones MoBro provides, such as React, styled-components, d3,
visx and lodash-es. Installing another package in your project has no effect at runtime.
Check the list of available packages before planning
a widget around a library.
Requirements
- Node.js 20 or later
- Git, used by the CLI to create new projects
- MoBro installed and running on the same machine, to test your widget pack
- An IDE supporting TypeScript and React, e.g. JetBrains WebStorm or Visual Studio Code
Widget Pack Development
Dashboard SDK
The Dashboard SDK provides everything a widget needs to interact with MoBro: hooks to read the values users configured, subscribe to metrics, execute actions, and more. It consists of two npm packages:
| Package | Contains |
|---|---|
@modbros/dashboard-sdk | Hooks, components and utilities for widgets |
@modbros/dashboard-core | Shared types (e.g. ChannelValue), metric formatting utilities and the JSON schemas |
See the Dashboard SDK Reference for all available features.
CLI
The @modbros/dashboard-cli simplifies the widget pack
development workflow by providing tools to:
- Create a new widget pack project.
- Run a widget pack in MoBro while developing, rebuilding it on every change.
- Publish a widget pack to the official Marketplace and manage its listing.
Install the CLI globally using npm:
npm install --global @modbros/dashboard-cli
This documentation describes @modbros/dashboard-sdk 1.4.2, @modbros/dashboard-core 1.3.0 and
@modbros/dashboard-cli 1.3.0. React is provided in version 18.3.1, so React 19 APIs are not available.
Marketplace
The Marketplace acts as the central, official "store" for plugins and widget packs.
It allows users to browse, install, and manage widget packs directly from within MoBro.
To make your widget pack accessible to all MoBro users, you must publish it to the Marketplace.
Themes and Layouts
Neither themes nor dashboard layouts are extension points for developers:
- Themes are part of the MoBro app. Widgets can read the selected theme using
useSettings, but can't provide themes. - Layouts are complete dashboards that users create in the dashboard builder and share via the Marketplace. They are built in the app, not in code.