Display real-time line, bar, and area charts for time-series data visualization with automatic updates.

// Simple value
msg.payload = 23.5;

// Array with timestamps
msg.payload = [
  { x: Date.now(), y: 23.5 }
];

Show values as circular gauges with customizable ranges, color zones, and smooth animations.

// Simple percentage
msg.payload = 75;

// Displays as percentage or absolute value
// based on min/max configuration

Add clickable buttons to trigger flows and send messages. Supports icons, colors, and confirmation dialogs.

// Outputs configured payload when clicked
{
  "payload": "start",
  "topic": "control"
}

Toggle switches for on/off control of devices and settings. Reflects actual device state with feedback.

// Outputs on/off value on toggle
{ "payload": true }  // when on
{ "payload": false } // when off

Adjustable sliders for setting numeric values like brightness, speed, or volume.

// Outputs current value
{
  "payload": 75,
  "topic": "brightness"
}

Dropdown menus for selecting from predefined or dynamic options. Supports multi-select and search.

// Single select
{ "payload": "option1" }

// Multi-select
{ "payload": ["a", "b", "c"] }

Multi-field forms for structured data input with validation, submit buttons, and responsive layouts.

// All field values as object
{
  "payload": {
    "name": "John",
    "email": "john@example.com"
  }
}

Display data in sortable, filterable tables with pagination and row selection events.

// Input array of objects
msg.payload = [
  { name: "Sensor A", value: 23.5 },
  { name: "Sensor B", value: 18.2 }
];
// Click outputs selected row

Custom HTML/CSS/JS widgets for advanced dashboard layouts with full control over appearance.

Display toast notifications and alerts on the dashboard with different severity levels and positions.

// Simple notification
msg.payload = "Alert message!";

// Displays as toast notification