# 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:** 1\
**Showing post:** 3

<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

---

_[View the full topic](https://discourse.nodered.org/t/mqtt-werte-in-ui-builder-anzeigen/101902)._
