Widget Overview

A conceptual introduction to what a widget is on the Invent platform, how widgets fit into the portal, and how they're built — before you dive into Widget Development.

What is a widget?

A widget (also called a micro-app) is a self-contained React single-page application that runs inside the Invent portal. Each widget owns a slice of functionality — a KPI tracker, a chart, a data table, a form — and is developed, versioned, and deployed independently of the platform and of other widgets.

Widgets are loaded into the host application at runtime via Module Federation, so a vendor can ship a new version of their widget without rebuilding the portal.

How widgets fit into the platform

Portal (Host application)
└── Dashboard
    ├── Widget  ← your micro-app
    ├── Widget
    └── Widget

• The portal is the host application a customer logs into. It provides theming, navigation, authentication, and the runtime that loads widgets. See System Overview for the platform architecture.
• A dashboard is a configurable grid of widgets. Users compose dashboards in the Dashboard Composer and place widgets from the Micro App Library.
• A widget renders inside a dashboard cell, receives its size and settings from the host, and calls platform APIs (data, notifications, state sharing) that the host injects as props.

Widget types

Widgets come in three types — Platform (0), Dashboard (1), and Universal (2) — which determine where a widget can appear and which entry points it must expose. Most vendor widgets are Dashboard widgets. See Understanding Widget Types for details.

Anatomy of a widget

A dashboard widget exposes three modules to the host:

Module	Purpose
Widget	The main component — what renders on the dashboard
Widget Settings	The configuration form shown in the Dashboard Composer
Widget Preview	The small (88×64) SVG shown in the Micro App Library

The widget also declares its identity, layout constraints, and settings schema in widget-config.json. See Project Structure for the repo layout and Widget Configuration for the config file.

How widgets are built

• React SPA, bundled with rspack and exposed via Module Federation.
• Tailwind CSS v4 + @invent/wl-ui-kit-next (shadcn-based components) for UI, themed by platform design tokens so every widget follows the customer's brand and dark mode automatically.
• Platform props/APIs injected by the host — httpClient, notifications, React Query, state sharing, extensions — that you consume from inside the widget.

The widget lifecycle

1. Scaffold a widget from the template — see the AI Quickstart.
2. Develop it — configure, integrate with the dashboard, and use platform features per the Widget Development.
3. Publish it — the Invent Technical team registers your app to the portal, then you place it on a dashboard.

Where to go next

• Build your first widget → AI Quickstart
• Learn the platform and how to build on it → Widget Development
• Look up a subsystem spec → Manual