Node-RED MQTT Dashboard: Visualise Sensor Data (Guide)

Build sovereign, self-hosted IoT visualisation? WZ-IT designs, builds and runs Node-RED, MQTT and dashboards on your infrastructure - open source, EU, no cloud lock-in. Explore IoT platform development

You build a Node-RED MQTT dashboard in five steps: start Node-RED 5 with Docker, install the Dashboard 2.0 package (@flowfuse/node-red-dashboard) via the palette, connect an mqtt-in node to your broker, split the JSON payload with a json and change node, and wire the values into gauge, chart and text widgets. After deploy you see live sensor data at http://localhost:1880/dashboard. This guide walks step by step through installation, the MQTT connection, payload parsing and the question of when Node-RED dashboard is enough and when Grafana is the better choice.

Table of contents

• Requirements: Node-RED 5 and Dashboard 2.0
• Install Node-RED with Docker
• Install Dashboard 2.0
• Connect the mqtt-in node to your broker
• Parse the JSON payload: json, change or function
• Add widgets: gauge, chart, text
• Visualise live sensor data
• Node-RED dashboard vs Grafana: when to use which
• How we work at WZ-IT
• Further guides

Requirements: Node-RED 5 and Dashboard 2.0

You need a reachable MQTT broker (e.g. Mosquitto or the broker of an IoT platform) that your sensors publish to, plus an environment with Docker. Two version questions matter in 2026:

• Node-RED 5.0 was released on 9 June 2026 (nodered.org/blog). It requires Node.js 22.9 or later and recommends Node 24.x. The official Docker image already ships a suitable runtime.
• For the UI there are two easily confused packages. Use Dashboard 2.0 (@flowfuse/node-red-dashboard). The old node-red-dashboard (Dashboard 1.0) is built on Angular v1, which reached end of life at the end of 2021, and was formally deprecated on 27 June 2024 (flowfuse.com) - no new features, only best-effort patches.

For the transport protocol basics see What is MQTT?. In the example our sensors publish JSON like {"temperature": 21.5, "humidity": 48} to a topic such as sensors/room1/data.

Install Node-RED with Docker

Node-RED starts with a single command. We deliberately pin the 5.0 tag instead of latest:

docker run -d \
  -p 1880:1880 \
  -v node_red_data:/data \
  --name nodered \
  nodered/node-red:5.0

The named volume node_red_data is mapped to the /data directory inside the container - that is where flows (flows.json), credentials and installed nodes live, so nothing is lost on restart (nodered.org/docs). Then open http://localhost:1880 in your browser; on a remote host use http://SERVER-IP:1880.

For continuous operation the same rule applies as for any web app: do not expose Node-RED unprotected. Put a reverse proxy with TLS (nginx, Traefik, Caddy) in front and enable adminAuth in settings.js (login for the flow editor) plus, if needed, separate authentication for the dashboard.

Install Dashboard 2.0

The widgets come as additional nodes via the Palette Manager:

1. Open the menu in the top right, choose Manage palette.
2. Go to the Install tab and search for node-red-dashboard.
3. Install the @flowfuse/node-red-dashboard package (not the deprecated node-red-dashboard).

After a short install, new dashboard 2.0 nodes appear in the palette (ui-gauge, ui-chart, ui-text, ui-button and more). Dashboard 2.0 organises the UI in a four-tier hierarchy (dashboard.flowfuse.com):

When you create the first widget you can spin up ui-base, ui-page and ui-group directly via the pencil icon - so you only do this once.

Connect the mqtt-in node to your broker

Drag an mqtt in node from the palette into the flow and double-click it:

• Server: use the pencil to add a new broker config. Enter host and port - 1883 unencrypted or 8883 with TLS (enable in the Security/TLS tab). If the broker requires it, add username and password in the Security tab.
• Topic: your sensors' topic, e.g. sensors/room1/data. Wildcards are allowed: sensors/+/data catches every room, sensors/# everything below.
• QoS: 0 is enough for most sensor data; 1 guarantees at-least-once delivery.
• Output: set to "a parsed JSON object", so the node already delivers msg.payload as an object.

Click Deploy. The status under the node should show "connected". As a check, attach a debug node and watch the debug sidebar to confirm messages arrive.

Parse the JSON payload: json, change or function

If the mqtt in node only delivers text (e.g. with Output: auto-detect), a json node reliably converts the string into an object. Then you extract individual readings, because a gauge shows exactly one number:

• change node (no-code): rule Set -> msg.payload -> msg.payload.temperature. Ideal when you only need one value.
• function node (code), when logic is involved:

// extract temperature, validate, round
const t = msg.payload.temperature;
if (typeof t !== "number") return null;   // drop invalid values
msg.payload = Math.round(t * 10) / 10;    // round to 0.1 C
return msg;

For several values from one message (temperature and humidity), use a function node with multiple outputs or a second change node per widget. That keeps each branch cleanly mapped to exactly one display element.

Add widgets: gauge, chart, text

Now connect the parsed values to the display nodes. Dashboard 2.0 uses Apache eCharts for charts:

• ui-gauge (instant value): attach the node to the temperature branch, assign it to a group, set min/max (e.g. 0 to 50) and the unit C. The numeric msg.payload drives the needle.
• ui-chart (time series): choose type Line; the same msg.payload lands as a data point on the time axis. Use the "Remove older data" field (e.g. 1 hour) to cap the browser-side buffer.
• ui-text (label/status): shows values or text directly, e.g. "Last update" or a status set by a function node.

A typical flow then looks like this:

[mqtt in] -> [json] -> [change: payload = payload.temperature] -> [ui-gauge]
                   \-> [change: payload = payload.temperature] -> [ui-chart]

Visualise live sensor data

After Deploy, open the UI at http://localhost:1880/dashboard (remote: http://SERVER-IP:1880/dashboard). Each additional topic flows in through its own mqtt in node and widget branch on the same or a new ui-page. As soon as your sensors publish, the gauge needle moves in real time and the chart fills in point by point.

Three practical tips:

• Group width: ui-group has a fixed column width (default 6). Tune group and widget width so the layout stays responsive on a phone.
• Buffering: the chart history lives in the browser. If you need days or months of data, also write it to a time-series database (see the next section).
• Security: the dashboard does not inherit the editor login automatically. Protect /dashboard via the reverse proxy or the dashboard's own auth.

Node-RED dashboard vs Grafana: when to use which

Both visualise IoT data, but they solve different jobs. Node-RED dashboard sits right next to the flow and can also control (buttons, sliders, forms). Grafana is the analysis and reporting tool on top of a database.

In practice you combine both: Node-RED ingests MQTT, shows live values and writes them in parallel to InfluxDB, from which Grafana builds long-term dashboards. The article Grafana IoT dashboard with InfluxDB describes how to build that chain.

How we work at WZ-IT

We design, build and run Node-RED, MQTT and dashboards as sovereign, self-hosted building blocks of your IoT platform - on Proxmox, Hetzner or on-premises. That includes hardened Docker setups with TLS and backups, robust flows with clean payload handling, broker and sensor integration, and the right visualisation: Node-RED dashboard for the control panel, Grafana for reporting. As part of our Node-RED expertise and IoT platform development - open source, EU, no per-device licence.

Further guides

• Node-RED expertise - flows, integrations and operations
• What is MQTT? - the most important IoT protocol explained
• Grafana IoT dashboard with InfluxDB - store and visualise time series long term
• IoT self-hosted vs cloud - sovereignty, cost and lock-in compared

Want to visualise IoT data on your own terms? Get to know us or explore our IoT platforms.