Node-RED Dashboard Tutorial
By
Community
updated March 23, 2026
Developer
Navigate to:
If you’re already familiar with Node-RED, you know how useful it is for automation. This post is a guide to getting started with the Node-RED dashboard 2.0. We’ll cover how to install the Node-RED dashboard 2.0 nodes and provide examples of how to create a graphical user interface (GUI) for your automation.
What is Node-RED?
Node-RED is a programming tool built on Node.js that lets you create automated workflows with minimal code. It wires different nodes together, with each node performing a specific function that links them to create a flow that carries out an automation task (e.g., switching off the light in a room or closing a door).
Prerequisites
We assume you’ve already installed and set up Node-RED. If that isn’t the case, here are some guides that can help you achieve that a few different ways:
Node-RED dashboard installation
The first step in the process is installing the dashboard module in Node-RED.
In the browser’s Node-RED window, click on the Menu icon at the top right corner of the page, find Manage Palette on the menu items, click Install, and search for @flowfuse/node-red-dashboard. Install it and make sure the module reads @flowfuse/node-red-dashboard.
After successful installation, all the Dashboard 2.0 nodes will appear in the palette section. Each dashboard node provides a widget that you can display in a user interface (UI) (e.g., a gauge, chart, or button).
Creating a user interface
In this section, we’ll walk through how to create a dashboard UI using the Dashboard 2.0 nodes on Node-RED. But first, let’s understand the dashboard hierarchy.
Dashboard Hierarchy
Dashboard 2.0 uses this hierarchical structure:
- Base: Defines the base URL for your dashboard. The default is /dashboard.
- Page: Individual pages that users can navigate to.
- Theme: Offers different options for styling the dashboard.
- Group: Collections of widgets within a page
- Widget: Individual UI elements, like buttons, text, charts, and others.
We use pages and groups to arrange the UI in the Node-RED Dashboard 2.0. Pages are the main navigation section that hold or display different groups, which separate a page into several sections. In each group, you organize your node widgets (buttons, texts, charts, etc.)
Creating your first widget
Now let’s create your first widget.
Step 1: Grab a button node
Look at your palette on the left side and find the button node (It’s in the dashboard 2 section). Click and drag it to your workspace (the big grid area in the middle of your screen).
Step 2: Open the configuration
Double-click on the button you just placed. A configuration window will pop up with a bunch of options.
Step 3: Create a group
See Group near the top? Click the pencil icon next to the dropdown. This edits the default group Node-RED created when you added the widget. Give it a name like “My Controls.” If you want to create a completely new group instead, click the plus sign next to the pencil icon.
Step 4: Create a page
Now, in that same group window, you’ll see a field that says Page. Click the pencil icon next to it and then give the page a name, maybe “Dashboard,” for your first one. Now click Add ( or Update if you’re editing the default, as in my case).
Step 5: Finish up
You’ll be back at the group window. Click Add (or Update) there as well, and you should be returned to the button configuration window. Click Done, and everything should be set.
Now we have successfully created our first page and group. The next step will be displaying something on the user interface.
Display a widget on the UI
In this example, we want to create a button that displays text when clicked on.
- Add a text node from your palette and place it near your button.
- Wire them together. You can do this by dragging from the button’s right port to the text node’s left port.
- Double-click the text node and set the Group to match your button’s group (in my case, “My Controls”). Also, give a name and a label, then click Done.
- Next, double-click the button, scroll to Payload, type “Welcome to Dashboard 2.0!”, enter a name and a label like “Click Me,” and click Done.
- Now click the red Deploy button in the top right corner.
To view the dashboard UI, follow this URL: http://localhost:1880/dashboard or http://Your_RPi_IP_address:1880/dashboard, where Your_RPi_IP_address is the address of the Raspberry Pi machine you’re using, 1880 is the port where Node-RED is exposed, and /dashboard displays the dashboard user interface.
If everything works correctly, you’ll see the same window shown below.
When you click the button, the “Welcome to Dashboard 2.0” text will appear as shown in the image below.
You might see a light theme background. We’ll get to how to change themes later in the post.
More examples of widgets
Let’s create a simple dashboard example with two tabs and UI elements (widgets) in each.
Creating Additional Pages
Open the Dashboard 2.0 sidebar (right side of your editor) and click the + Page button at the top.
This will create a new page and pop up a window with options to edit the page’s properties (such as name, path, and others). Remember, you can also create pages when configuring a widget (as we did earlier).
Building an interactive data visualization
Now, we’ll create a slider that controls both a gauge and a chart in real-time. This is the setup:
Step 1: Drag a slider, gauge, and chart node into your workspace. Step 2: Double-click the slider, set min to 0, max to 100, and assign to a new group on your second page, which you just created (mine is “Monitoring Dashboard”).
Step 3: Next, double-click the gauge. Assign it to the same group and range of 0-100, and add a color segment (green 0-30, yellow 30-70, red 70-100).
Step 4: Next, configure the chart. Same group and set Type to “Line.”
Step 5: After this, you need to wire the gauge and chart to the slider, as shown in the image below.
Step 6: Deploy and go to your dashboard UI (http://localhost:1880/dashboard or http://Your_RPi_IP_address:1880/dashboard). Step 7: In your dashboard UI, navigate to the next page. Click the hamburger icon in the top left corner, and you will see a list of your pages. Select your second page (mine is “Monitoring Dashboard”).
Step 8: On your second page, notice the initial state of your dashboard.
Step 9: Move the slider on your dashboard and watch everything update instantly (the gauge changes color, the chart plots, and Z the values).
Connecting to real weather data
Now, let’s enhance our example by connecting to a real data source. In this example, we would fetch real weather data and display it on our dashboard.
Step 1: Go to your Manage Palette on your Menu, search and install node-red-node-openweathermap (Like we did with @flowfuse/node-red-dashboard in the previous example).
Step 2: Get an API Key from http://openweathermap.org (New keys take up to two hours to activate, so be patient if you’re just signing up).
Step 3: Drag openweathermap node to your workspace, double-click it, paste your API key and enter your city and country (e.g., “New York City, US”), and then click Done.
Step 4: Next, drag an inject node to your workspace, double-click it, and set Repeat to “interval.” Also, check “Inject once after” so it runs on startup. Then wire the inject node to your openweathermap node.
Step 5: Drag a debug node, wire it to the openweathermap node, and Deploy. Open the Debug panel (in the right sidebar, bug icon). You’ll see the weather data structure showing what’s available.
Step 6: Next, add three function nodes to extract data:
- Double-click the first function node, name it “Get Temperature,” and add the code below:
msg.payload = msg.payload.tempc;
return msg;
- Name the second “Get Humidity” and add:
msg.payload = msg.payload.humidity;
return msg;- Name the last function “Get Conditions” and add:
msg.payload = msg.payload.description;
return msg;- Wire all three functions from the openweathermap node.
Step 7: Next, add display widgets:
- Add two gauge nodes for temperature (set unit as “°C”, range -10 to 40) and humidity (% as unit, range 0-100).
- Add one text node for the weather conditions.
- Assign all to the same group (preferably a new group and page) and wire each function to its corresponding display widget.
Step 8: Finally, deploy and visit your dashboard UI.
Now, you’ve gotten a live weather dashboard updating every 10 minutes!
Dashboard theme and styling
By default, the Node-RED dashboard comes with a light theme, but you can also customize it. To edit the theme on your UI, open the Dashboard 2.0 sidebar, click on the Theme section, and you can:
- Customize themes and colors
- Set custom fonts
- Adjust spacing and sizing
After you’re done, don’t forget to deploy so you can view your changes.
Common issues and fixes
While following this tutorial, here are some common hurdles you might encounter and how to fix them:
- If your dashboard fails to open, look at the URL. Try using http://localhost:1880/dashboard, otherwise, use your PI’s IP instead.
- If your widgets are not appearing on your dashboard, ensure that they’re connected to a group and a page before deploying.
- If OpenWeatherMap returns “Invalid API key,” just wait a bit (activation can last two hours). Clicking buttons, but no response? Ensure your nodes are well-connected.
Wrapping up Node-RED dashboard
The aim of this guide was to provide basic knowledge of how the Node-RED dashboard 2.0 works on Raspberry Pi. I believe, with all the examples we covered in this post, you should have an idea of what you want to do next with the Node-RED dashboard on your journey to an automated life.
