Step 3: Add the libraries

Open the Library Manager tab in Wokwi and add:

• DHT sensor library for ESPx by beegee-tokyo, which gives you the DHTesp class
• PubSubClient by Nick O'Leary, the MQTT client

Step 4: Write the firmware

Paste this into sketch.ino, replacing YOURNAME:

Prefer MicroPython? Start the Wokwi project from the ESP32 MicroPython template instead, paste this into main.py, and skip the Library Manager step entirely. It publishes the same two topics, so every step after this one is identical. Wokwi bundles umqtt.simple. If your project cannot find it, add a requirements.txt with the single line umqtt.simple and Wokwi will fetch it on the next run.

Step 5: Run it

Click the green Run button. The first build takes a while because Wokwi compiles on a shared queue.

Watch the serial monitor in the bottom panel. You are looking for:

The numbers sit still because Wokwi's virtual DHT22 returns fixed readings. Click the sensor in the simulation view and drag its temperature and humidity sliders to change them while the sketch runs.

If you see "Build Servers Busy": that is Wokwi's shared compile queue, not your code. Close the dialog and click Run again. It usually clears within a minute.

Step 6: Check the data with a public MQTT client

This step is optional, but it splits the problem in half. If the readings show up here, the firmware and the broker are fine and anything that goes wrong later is a Node-RED problem.

1. Open HiveMQ's public WebSocket client.
2. Click Connect. The defaults already point at the right broker.
3. Expand Subscriptions, add the topic YOURNAME/dht22/#, and click Subscribe.
4. Expand Messages.

Step 7: Install Node-RED

Node-RED is not a website. It is a program that runs on your own computer, and your browser only displays its editor.

Node.js has to be installed first. Node-RED is a Node.js program, so if this machine has never had Node.js on it, install that before anything else. Download the Windows installer from nodejs.org, run it, and click Next through every screen, accepting the licence and answering Yes to any prompt Windows raises, including the User Account Control dialog. Leave the default options as they are. When it finishes, close the terminal and open a new one so the updated PATH is picked up.

Then install Node-RED itself:

If node-red is "not recognised" or "not found": the install worked, but Windows puts global npm binaries in %APPDATA%\npm, and that folder is not always on PATH. You do not need to fix PATH to carry on, just start it by its full path instead:

Open http://localhost:1880 in your browser and you get an empty flow.

Step 8: Install the dashboard palette

The gauge nodes are not built in. Use the hamburger menu at the top right, then Manage palette, then the Install tab, and search for node-red-dashboard.

Step 9: Build the flow

Start on a clean canvas. If the editor still has nodes from an earlier attempt, clear them out first: press Ctrl+A on the canvas and hit Delete, or open the tab menu, delete the whole flow, and add a new one. Half-configured leftovers are the most common reason a flow misbehaves later.

Drag two mqtt in nodes onto the canvas. They are the teal ones under network. The orange triangle on each means it is not configured yet, which is expected at this point.

Double-click the first one. Server is none and the topic is empty.

Click the pencil next to Server to add a broker: server broker.hivemq.com, port 1883, security left blank. Then click Add.

Set this node's Topic to your temperature topic, then do the same for the second node with the humidity topic. The broker is already configured, so the second node just reuses it from the dropdown.

Now drag two gauge nodes from the dashboard section onto the canvas.

Double-click a gauge. Group is none, which is what the warning triangle is about. A gauge has to live inside a group, and a group has to live on a tab.

Click the pencil next to Group, name the group something like DHT22, then use the pencil next to Tab to create a tab called Home. Click Add through both dialogs.

Give each gauge a label and a sensible range. Temperature and humidity need different ranges, and a gauge with the wrong range either pins at the end or never moves.

Wire each mqtt in node's output to a gauge's input by dragging from one port to the other.

Read every field back before you deploy. Each dialog has more than one dropdown and picking the wrong entry is easy. Both mqtt in nodes must point at the same broker.hivemq.com config rather than a second one you created by accident, the topics must match your firmware character for character, QoS and output format can stay on their defaults, and each gauge must sit in the DHT22 group with the correct range. Open each node once more and check it.

Step 10: Deploy and watch it move

Nothing you have drawn is running yet. Click Deploy at the top right to push the flow to the Node-RED runtime.

Open http://localhost:1880/ui in a new tab. That is the dashboard, separate from the editor.

When something does not work

• "Build Servers Busy" in Wokwi: the shared compile queue is overloaded. Retry.
• WiFi never connects: the SSID has to be exactly Wokwi-GUEST, case-sensitive, with an empty password.
• MQTT connects but the dashboard stays empty: the topics do not match between the firmware and Node-RED. Check both ends character by character, including your YOURNAME substitution.
• You see readings that are not yours: someone else is on the same prefix. Make yours longer and stranger.
• "Please add some UI nodes and redeploy": the gauges exist in the editor but were never deployed.
• Red triangle and "Invalid properties: - group": the gauge has no dashboard group. See step 9.

About the broker

This guide uses broker.hivemq.com because it needs no account and no setup. Anyone in the world can publish or subscribe to any topic on it, which is the whole reason the unique prefix matters, and the reason nothing sensitive should go near it. For a real project, run your own broker such as Mosquitto locally or on a server, and point both the firmware and Node-RED at that address.

Where to take it next

• Add a chart node beside the gauges to get history instead of a single instant value.
• Publish JSON instead of a bare number, so one topic carries both readings and a timestamp.
• Swap the simulated board for a real ESP32 and a real DHT22. The sketch does not change.