Node-RED MQTT Dashboard: Visualize MQTT Data in Real Time
Introduction
One of the most exciting parts of building IoT projects is seeing your data come to life. Collecting temperature, humidity, air quality, or device status information is useful, but visualizing that information in a dashboard makes it much easier to understand and act upon.
In the previous tutorials, we learned how MQTT works, installed a Mosquitto MQTT broker, and connected an ESP32 as both a publisher and subscriber. At this point, sensor data is flowing through our MQTT broker, but we still need a convenient way to monitor it.
This is where Node-RED shines.
Node-RED is a powerful low-code development tool that allows you to connect devices, APIs, and online services using a visual drag-and-drop interface. Combined with MQTT, Node-RED can subscribe to sensor topics and display data through attractive dashboards without requiring extensive web development skills.
In this tutorial, you’ll learn how to install Node-RED, connect it to your MQTT broker, and create a real-time dashboard that displays sensor data from an ESP32.
By the end of this guide, you’ll have a working IoT dashboard capable of displaying MQTT messages in gauges, charts, and text widgets.
What You Will Build
In this project:
- Install Node-RED
- Install Node-RED Dashboard
- Connect Node-RED to Mosquitto MQTT Broker
- Subscribe to MQTT topics
- Display sensor values
- Create real-time charts
- Build a browser-accessible dashboard
How the System Works
The data flow looks like this:
Whenever the ESP32 publishes a new sensor reading, Node-RED receives the message through MQTT and updates the dashboard instantly.
Prerequisites
Before starting, ensure you have:
- Raspberry Pi or Ubuntu system
- Mosquitto MQTT Broker installed
- ESP32 publishing MQTT data
- Internet connection
You should also complete:
- What is MQTT?
- Install Mosquitto MQTT Broker
- Raspberry Pi MQTT Broker Setup
- ESP32 MQTT Publisher and Subscriber
Step 1: Install Node-RED
If Node-RED is not already installed, run:
curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered
After installation, enable Node-RED to start automatically.
sudo systemctl enable nodered.service
Start Node-RED.
node-red-start
Step 2: Access Node-RED
Open your browser and navigate to:
http://YOUR_RASPBERRY_PI_IP:1880
Example: http://192.168.1.150:1880
You should see the Node-RED editor.
Step 3: Install Node-RED Dashboard
Open:
Menu → Manage Palette
Select:
Install
Search for:
@flowfuse/node-red-dashboard
Install the package.
This adds dashboard widgets such as:
- Gauge
- Chart
- Text
- Switch
- Slider
- Button
Step 4: Add MQTT Input Node
Drag an mqtt in node into the workspace.
Double-click it.
Configure:
Server: 192.168.1.150 Port: 1883 Topic: home/temperature
Click Done.
Node-RED is now subscribed to the MQTT topic.
Step 5: Display MQTT Data
Drag a:
Text
widget onto the workspace.
Connect:
MQTT In → Text
Deploy the flow.
Step 6: Create a Real-Time Gauge
Drag a:
Gauge
widget onto the workspace.
Configure:
Label: Temperature Units: °C Range: 0–50
Connect:
MQTT In → Gauge
Deploy the flow.
Every MQTT message will update the gauge automatically.
Step 7: Create a Real-Time Chart
Drag a Chart Widget
Connect:
MQTT In -> Chart
Click on Deploy.
As sensor data arrives, Node-RED plots values automatically.
This is extremely useful for:
- Temperature trends
- Energy monitoring
- Air quality tracking
- Industrial data logging
Accessing the Dashboard
Open:
http://YOUR_RASPBERRY_PI_IP:1880/dashboard
Example:
http://192.168.1.150:1880/dashboard
You should now see:
- Temperature gauge
- Live chart
- Sensor values
updating in real time.
Testing MQTT Data
Open a terminal.
Publish a message:
mosquitto_pub -h localhost -t home/temperature -m "27.5"
The dashboard should update immediately.
Try different values:
mosquitto_pub -h localhost -t home/temperature -m "30" mosquitto_pub -h localhost -t home/temperature -m "22"
Watch the gauge and chart respond instantly.
Real-World Applications
Smart Home Automation
- Temperature monitoring
- Smart lighting dashboards
- Energy consumption tracking
Environmental Monitoring
- Weather stations
- Greenhouse monitoring
- Air quality measurement
Industrial IoT
- Equipment status dashboards
- Machine monitoring
- Predictive maintenance
Agriculture
- Soil moisture monitoring
- Irrigation dashboards
- Farm sensor networks
Troubleshooting
MQTT Node Not Receiving Data
Verify:
sudo systemctl status mosquitto
Ensure the broker is running.Dashboard Not Loading
Restart Node-RED:
node-red-stop node-red-start
Charts Not Updating
Verify:
- MQTT topic names
- Broker IP address
- ESP32 connection status
Remember that MQTT topics are case-sensitive.
Why Use Node-RED for MQTT Projects?
Node-RED provides several advantages:
- No front-end coding required
- Rapid dashboard creation
- MQTT integration built-in
- Large community support
- Excellent Raspberry Pi compatibility
For many IoT projects, a Node-RED dashboard can be built in minutes rather than hours.
Conclusion
In this tutorial, you’ve learned how to connect Node-RED to an MQTT broker and create a real-time dashboard for visualizing sensor data. Using only a few drag-and-drop nodes, you can monitor IoT devices, display charts, and build interactive control panels.
Node-RED and MQTT form one of the most popular combinations in the IoT world because they make data collection, visualization, and automation incredibly simple.
In the next tutorial, we’ll secure our MQTT communication using TLS encryption and authentication.
Frequently Asked Questions
What is Node-RED?
Node-RED is a flow-based programming tool used to connect hardware devices, APIs, and online services through a visual interface.
Can Node-RED work with MQTT?
Yes. MQTT integration is built into Node-RED through dedicated MQTT nodes.
Is Node-RED free?
Yes. Node-RED is open source and free to use.
Can I run Node-RED on Raspberry Pi?
Yes. Raspberry Pi is one of the most popular platforms for running Node-RED.
Does Node-RED support dashboards?
Yes. Using the Node-RED Dashboard package, you can create web-based dashboards with charts, gauges, switches, and buttons.
What port does Node-RED use?
By default, Node-RED runs on port 1880.
