# Mqtt Werte in Ui-Builder anzeigen

**URL:** <https://discourse.nodered.org/t/mqtt-werte-in-ui-builder-anzeigen/101902>\
**Category:** General\
**Tags:** mqtt, uibuilder\
**Created:** [14 October 2026 10:57 UTC](https://discourse.nodered.org/t/mqtt-werte-in-ui-builder-anzeigen/101902 "2026-10-14T10:57:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![trimborg](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trimborg/32/108610_2.png) [@trimborg](https://discourse.nodered.org/u/trimborg)\
**Post date:** [14 October 2026 10:57 UTC](https://discourse.nodered.org/t/mqtt-werte-in-ui-builder-anzeigen/101902/1 "2026-10-14T10:57:39Z")

</div>

Hallo zusammen,  
da ich noch ein absoluter Anfänger bin. Möchte ich in diesem Forum um Rat fragen.  
Ich verwende einen ESP32 Modul mit einem BME688 Sensor von Bosch, welcher die Werte per MQTT an einen Raspberry CM5 liefert. Diese Werte kann ich auch in Node-Red auslesen und sehe sie auch im Debug-Fenster.  
Jetzt versuche ich die Werte über Ui-Builder an eine HTML Seite anzeigen zu lassen. Was leider nicht funktioniert.  
Anbei meine Dateien die ich verwende:  
index.html

```auto
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <title>MQTT Dashboard</title>
    <!-- uibuilderfe lädt die benötigte Front-End-Bibliothek automatisch -->
    <script src="./uibuilder/vendor/uibuilder/uibuilderfe.min.js"></script>
</head>
<body>

    <h1>Live MQTT Daten</h1>
    <div>
        <!-- Hier wird der MQTT-Wert eingefügt -->
        Temperatur: <span id="Temperature">Warte auf Daten...</span> °C
    </div>

    <!-- Verknüpfung zur Logik-Datei -->
    <script src="./index.js"></script>
</body>
</html>

```

index.js

```auto
// Initialisiere uibuilder Verbindung
uibuilder.start()

// Höre auf eingehende Nachrichten aus Node-RED
uibuilder.onChange('msg', function(msg) {
    // Überprüfen, ob die Nachricht existiert
    if (msg) {
        console.log('Nachricht empfangen:', msg);

        // Prüfen, ob die Nachricht vom richtigen MQTT-Topic kommt (optional)
        if (msg.topic === 'payload.BME680.Temperature') {
            // HTML-Inhalt mit dem MQTT-Payload überschreiben
            document.getElementById('Temperature').innerText = msg.payload;
        }
    }
});

```

Über jeden Hinweis oder Tipp wäre ich sehr dankbar 🤗  
Grüße  
Guido

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [14 October 2026 13:17 UTC](https://discourse.nodered.org/t/mqtt-werte-in-ui-builder-anzeigen/101902/2 "2026-10-14T13:17:32Z")

</div>

> [@trimborg](#):
>
> Hello everyone,  
> As I am an absolute beginner, I would like to ask for some advice in this forum.  
> I am using an ESP32 module with a Bosch BME688 sensor, which sends data via MQTT to a Raspberry CM5. I can read these values ​​in Node-RED and see them in the debug window.  
> Now I am trying to display the values ​​on an HTML page using UI Builder, but unfortunately, it isn't working.  
> Attached are the files I am using:  
> index.html

I would check the console.log to verify the msg

I would normally expect the msg.topic from MQTT to be something like 'BME688/Temperature' with the msg.payload to be either a number or text (depending on what you are sending from the ESP32)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [14 October 2026 14:06 UTC](https://discourse.nodered.org/t/mqtt-werte-in-ui-builder-anzeigen/101902/3 "2026-10-14T14:06:29Z")

</div>

> [@trimborg](#):
>
> `src="./uibuilder/vendor/uibuilder/uibuilderfe.min.js"`

Hi,

You are using outdated code I'm afraid and your link to the client library is incorrect. You are also missing a link to the [socket.io](http://socket.io) client code.

If you want to use the old-style library (which I really don't recommend), where your `index.js` line is, amend that to the following and remove the incorrect link in the head section:

```html
    <script src="../uibuilder/vendor/socket.io/socket.io.js"></script>
    <script src="./uibuilderfe.min.js"></script>
    <script src="./index.js"></script>

```

I also think there is an error in your JavaScript as well `if (msg.topic === 'payload.BME680.Temperature')` - `'payload.BME680.Temperature'` does not look like a message topic, rather it is content from the message.

* * *

However, a much better solution is to move to the newer version of the client that we switched to as a default back in v6.0 of UIBUILDER (we are now in v7.7).

The best approach is for you to add a new test uibuilder node to your Node-RED instance - it will deploy the latest default template which you can then adapt.

With the this version, there isn't as much boilerplate code required and, you may not even need any of your own JavaScript since uibuilder now has simpler methods for showing output from Node-RED.

If we assume that your `msg.topic` is "BME680-Temperature", then you can automatically display it using the following HTML:

```html
<!doctype html>
<html lang="en"><head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" href="../uibuilder/images/node-blue.ico">

    <title>Live MQTT Daten - Node-RED UIBUILDER</title>
    <meta name="description" content="Node-RED UIBUILDER - Live MQTT Daten">

    <!-- Your own CSS (defaults to loading uibuilders css)-->
    <link type="text/css" rel="stylesheet" href="./index.css" media="all">

    <!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / -->
    <script defer src="../uibuilder/uibuilder.iife.min.js">/* THE UIBUILDER LIBRARY MUST BE IN THE HTML! DO NOT REMOVE */</script>
    <!-- <script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>-->
    <!-- #endregion -->

</head><body>
    <header>
        <h1 class="with-subtitle">Live MQTT Daten</h1>
        <div role="doc-subtitle">Using UIBUILDER for Node-RED</div>
    </header>

    <main>
        <article>
            <!-- Hier wird der MQTT-Wert eingefügt -->
            Temperatur:
            <span id="Temperature" uib-topic="BME680-Temperature">
                Warte auf Daten...
            </span> °C
        </article>
    </main>
</body></html>

```

See the following in the docs for details of the easy display methods:

> **[UIBUILDER Documentation v7](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/reactive?id=uib-topic)**
>
> UIBUILDER Documentation v7