First Widget

A widget is a React component that MoBro renders on the dashboard. The dashboard takes care of positioning and sizing the widget as configured by the user in the dashboard builder.

We'll create a Text widget that displays a text, which we'll make configurable later on.

Widget Configuration File

Every widget requires a configuration file named mobro-widget-config.json. MoBro searches the whole widget pack for these files to detect its widgets. We'll place each widget in its own directory under src/widgets/:

src/widgets/text/mobro-widget-config.json

{
  "name": "text",
  "displayName": "Text",
  "filename": "Text.tsx"
}

• name is the unique identifier of the widget within the widget pack.
• displayName is the name shown to users in the dashboard builder.
• filename is the path to the file containing the React component, relative to the configuration file.

For a detailed explanation of all configuration options, check out In-depth: Widget Configuration.

Creating the Component

Next, create the component that the configuration file points to:

src/widgets/text/Text.tsx

import React from 'react'

export default function Text() {
  return <h1>Text</h1>
}

caution

The component must be the default export of the file. Otherwise, MoBro can't render the widget.

Project Structure

Your project now contains the following files:

my_first_widget_pack
├── src/
│   └── widgets/
│       └── text/
│           ├── mobro-widget-config.json
│           └── Text.tsx
├── mobro-widget-pack-config.json
└── package.json

That's it, the widget is ready to be used on a dashboard! Next, let's run the widget pack in MoBro.