Getting Started with Node-RED Dashboard

This post is an introduction to Node-RED dashboard with Raspberry Pi. We’ll cover how to install Node-RED Dashboard and exemplify how to build a graphical user interface.


If you like home automation and you want to learn more about Node-RED, Raspberry Pi, ESP8266 and Arduino. I recommend that you download my course: Build a Home Automation System for $100.

What is Node-RED Dashboard?

Node-RED Dashboard is a module that provides a set of nodes in Node-RED to quickly create a live data dashboard.

To learn more about Node-RED Dashboard you can check the following links:

Installing Node-RED Dashboard

To install the Node-RED Dashboard run the following commands:

[email protected]:~ $ node-red-stop
[email protected]:~ $ cd ~/.node-red
[email protected]:~/.node-red $ npm install node-red-dashboard

Then, reboot your Pi to ensure that all changes take effect on Node-RED software:

[email protected]:~ $ sudo reboot

To open the Node-RED UI, type your Raspberry Pi IP address in a web browser followed by :1880/ui as shown below:


At the moment your dashboard is empty – as you can see in the following figure – because we haven’t added anything to the dashboard yet:

Creating a UI (User Interface)

In this section we’re going to show you how to create your UI (User Interface) in Node-RED.

The Dashboard Layout

Open another tab in your browser to access Node-RED with:


Scroll down on the nodes section.  You’ll see you have a set of nodes called dashboard as shown in the following figure:

Nodes from the dashboard section provide widgets that show up in your application user interface (UI).

The user interface is organized in tabs and groups. Tabs are different pages on your user interface, like several tabs in a browser. Inside each tab you have groups that divide the tabs in different sections so that you can organize your widgets.

Every widget should have an associated group that determines where the widget should appear on the user interface.

To create a tab and a group follow the following instructions (see figure below):

  • On top right corner of the Node-RED window you have a tab called dashboard.
  • Select that tab (1). To add a tab to the user interface click on the +tab button (2).
  • Once created, you can edit the tab by clicking on the edit button (3).

You can edit the tab’s name and change its icon:

After creating a tab, you can create several groups under that tab. You need to create at least one group to add your widgets. To add a group to the created tab, you need to click on the +group button (4).

Then, you can edit the created group by clicking on the edit button (5).

You can edit its name, select its corresponding tab and change its width.

Dashboard Theme

The Node-RED Dashboard has a white background and a light blue bar by default. You can edit its colors in the Theme tab on the up right corner as show in the following figure.

Change the style, deploy the changes and see the Dashboard UI changing its colors. For example, like in the following figure:

Dashboard Site

At the right upper corner of the Node-RED window, you have another tab called Site that allows you to do further customization as show in the figure below.

Feel free to change the settings, then deploy the changes and see how the UI looks. At the moment you won’t see much difference because you haven’t added anything to the dashboard yet. Those changes will be noticeable when you start adding widgets to the UI.

Creating a User Interface – Example

In this section we’re going to make a dashboard example to show you how you can build and edit your own dashboard – we won’t actually add functionalities to the widgets – we’ll do that in future projects. This dashboard will have the following features:

  • Two different tabs: one called Room and another called Garden
  • The Room tab will have two groups and the Garden tab will have one group
  • We’ll add a color picker and a switch to the room groups
  • We’ll add a chart to the Garden group

Creating the Tabs

On the top right corner on the Node-RED window, select the dashboard tab and create two new tabs by clicking on the +tab button.

Edit one tab with the following properties:

  • Name: Room
  • Icon: tv

And the other one with the following:

  • Name: Garden
  • Icon: local_florist

Then, add two groups to the Room tab and one group to the Garden tab. The following figure shows how your dashboard layout looks.

Adding the Widgets

Add a switch, a slider, a colour picker and a gauge to the flow as show in the following figure:

Double click on the switch. A new window pops up.

In this new window you can choose where you want your button widget to appear. In this case we want it to appear in the Room tab, Group 1 as highlighted in red in the previous figure.

Then, do the same for the other widgets but add them to the following groups:

  • slider: Group 1 [Room]
  • colour picker: Group 2 [Room]
  • gauge: Group 1 [Garden]

Deploy the changes and go to the dashboard UI to see how it looks.


Your dashboard has two tabs: the Room and the Garden as highlighted in the following figure:

Here’s how the room tab looks with two groups.

And here’s how the Garden tab looks with one group.

Wrapping up

In this post we’ve shown you how to build a user interface with Node-RED.

If you like Node-RED and you would like to make a real world home automation system with Raspberry Pi, ESP8266, Arduino and the Node-RED software, make sure you try our course: Build a Home Automation System for $100.

We hope you’ve found this post useful.

Thanks for reading!

Build Web Server projects with the ESP32 and ESP8266 boards to control outputs and monitor sensors remotely. Learn HTML, CSS, JavaScript and client-server communication protocols DOWNLOAD »

Build Web Server projects with the ESP32 and ESP8266 boards to control outputs and monitor sensors remotely. Learn HTML, CSS, JavaScript and client-server communication protocols DOWNLOAD »

Enjoyed this project? Stay updated by subscribing our newsletter!

13 thoughts on “Getting Started with Node-RED Dashboard”

  1. This was a great intro to Node-red. I highly recommend using this product if you have ANY wifi connected devices such as ESP8266, ESP32, and of course RasPi. When combined with MQTT you can do virtually anything.

    I would love to see a tutorial on how to create node-red nodes from scratch. I use node-red in a lot of projects but sometimes there isn’t an existing node to do what I want and it would be great if I could create my own.

    • Hi Bruce. Thanks for your support.
      In an upcoming project we’re going to integrate an ESP8266 with Node-RED using the MQTT communication protocol.
      Stay tuned 🙂

  2. Very nice tutorial. I have only one quibble: the Node-Red and Dashboard UI’s appear to have undergone some changes as of March 2019. In Node-Red, the dashboard (as well as info and debug) are now in a dropdown. In Dashboard, the Group list is also hidden until you access the dropdown in the upper left corner. Otherwise, I had no problems and am ready to try building my greenhouse monitoring system. Thanks for all your great info.

    • Hi.
      Thank you for letting us know.
      We have to update this tutorial soon.
      Thank you for your interest in our tutorials.

  3. Very nice tutorial. This post made it easy to understand node-red dashboard in easy and better way. I appreciate the effort.
    I would like to see a tutorial on how to create a node “for dashboard” from scratch as soon as possible.
    Thank you and Best Regards.

  4. Tried to follow along but saw warnings on my Raspberry Pi when I issued “npm install node-red-dashboard” during installation steps. Then, when I fed the “http://Your_RPi_IP_address:1880/ui” URL to a browser on any machine, I saw the error: Host refused to connect, ERR_CONNECTION_REFUSED

    Have the install or initial access steps changed with the newer version of Raspberry Pi OS…?

  5. Hi Sara, thanks for the detailed overview of working with Node-red dashboard. It is indeed helpful. I am facing the following issue, I hope you can help me resolve this.
    “Welcome to the Node-RED Dashboard
    Please add some UI nodes to your flow and redeploy”


Leave a Comment

Download our Free eBooks and Resources

Get instant access to our FREE eBooks, Resources, and Exclusive Electronics Projects by entering your email address below.