Here is an example flow (it loads a new flow tab) that explains some of the different ways that you can use Node-RED and UIBUILDER to update text on a web page managed by UIBUILDER.
Basically 3 different methods depending on your needs and style of working. All of which could be done either from Node-RED directly or using front-end code if you prefer. The 2nd example shows doing one of the ways using front-end code to demonstrate how easy it is.
[{"id":"36e46a8812418a38","type":"tab","label":"Text Updates","disabled":false,"info":"","env":[]},{"id":"a2a4f9ce8175afa5","type":"group","z":"36e46a8812418a38","name":"Base setup","style":{"fill":"#ffffbf","fill-opacity":"0.12","label":true,"color":"#000000"},"nodes":["60a8489436d0ee43","ff050c4347776e67","86ffc76eb5838f6c","d5ffe9a264b1c424","73283e35f23ba905","e8b79e0479ad07fb","53c7f0b93e1421c2","805f28a2a8324a1d","11c34f35abc00f11","475a22b945acf2c3","59e22173849a0305"],"x":34,"y":159,"w":932,"h":182},{"id":"59e22173849a0305","type":"junction","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","x":500,"y":200,"wires":[["ff050c4347776e67"]]},{"id":"60a8489436d0ee43","type":"debug","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"uib Std Output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":815,"y":220,"wires":[],"l":false},{"id":"ff050c4347776e67","type":"uibuilder","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"","topic":"","url":"text-update-egs","fwdInMessages":false,"allowScripts":false,"allowStyles":false,"copyIndex":true,"templateFolder":"blank","extTemplate":"","showfolder":false,"reload":true,"sourceFolder":"src","deployedVersion":"6.6.0","showMsgUib":true,"title":"","descr":"","x":670,"y":260,"wires":[["60a8489436d0ee43"],["86ffc76eb5838f6c","11c34f35abc00f11"]]},{"id":"86ffc76eb5838f6c","type":"debug","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"uib Control Output","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"true","targetType":"full","statusVal":"","statusType":"counter","x":905,"y":280,"wires":[],"l":false},{"id":"e044ccbbc70ecc60","type":"inject","z":"36e46a8812418a38","name":"Toggle Visible Msgs","props":[{"p":"_uib","v":"{\"command\":\"showMsg\"}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":190,"y":40,"wires":[["6a4c985e0fc73c31"]]},{"id":"ad3e6bf13e2c7f15","type":"inject","z":"36e46a8812418a38","name":"Log Lvl 5","props":[{"p":"_uib","v":"{\"command\":\"set\",\"prop\":\"logLevel\",\"value\":5}","vt":"json"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":220,"y":80,"wires":[["6a4c985e0fc73c31"]]},{"id":"86f9153ff0dc2d04","type":"inject","z":"36e46a8812418a38","name":"Reload","props":[{"p":"_ui","v":"{\"method\":\"reload\"}","vt":"json"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"reload","x":230,"y":120,"wires":[["6a4c985e0fc73c31"]],"info":"Sends a pre-formatted msg to the front-end that\r\ncauses the page to reload itself."},{"id":"6a4c985e0fc73c31","type":"link out","z":"36e46a8812418a38","name":"uib ctrls out","mode":"link","links":["b9605e7d0a662387","d5ffe9a264b1c424"],"x":355,"y":80,"wires":[]},{"id":"d5ffe9a264b1c424","type":"link in","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"uib-upd-egs - no cache","links":["6a4c985e0fc73c31","45c30769766809e0"],"x":375,"y":200,"wires":[["59e22173849a0305"]]},{"id":"73283e35f23ba905","type":"link in","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"uib-upd-egs - cached","links":["11c34f35abc00f11","230b14e3f0320ec0","d5772ba475aa309a"],"x":285,"y":300,"wires":[["e8b79e0479ad07fb"]]},{"id":"e8b79e0479ad07fb","type":"uib-cache","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","cacheall":false,"cacheKey":"topic","newcache":true,"num":1,"storeName":"default","name":"Cache (by topic)","storeContext":"context","varName":"uib_cache","x":420,"y":260,"wires":[["ff050c4347776e67"]]},{"id":"53c7f0b93e1421c2","type":"inject","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"Setup","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"text-upd-egs-setup","x":130,"y":220,"wires":[["805f28a2a8324a1d"]]},{"id":"805f28a2a8324a1d","type":"uib-element","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"Head","topic":"","elementtype":"title","parent":"body","parentSource":"","parentSourceType":"str","elementid":"","elementId":"","elementIdSourceType":"str","heading":"","headingSourceType":"str","headingLevel":"h2","data":"Different ways of updating UI text","dataSourceType":"str","position":"first","positionSourceType":"str","passthrough":false,"confData":{},"x":250,"y":220,"wires":[["e8b79e0479ad07fb"]]},{"id":"11c34f35abc00f11","type":"link out","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"link out 64","mode":"link","links":["73283e35f23ba905"],"x":815,"y":300,"wires":[]},{"id":"475a22b945acf2c3","type":"inject","z":"36e46a8812418a38","g":"a2a4f9ce8175afa5","name":"Clear Cache","props":[{"p":"uibuilderCtrl","v":"clear cache","vt":"str"},{"p":"cacheControl","v":"CLEAR","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":230,"y":260,"wires":[["e8b79e0479ad07fb"]]},{"id":"6f9255ce54661e2a","type":"comment","z":"36e46a8812418a38","name":"Add this manually to index.html (see inside) - The flow below updates from Node-RED. \\n Also, uncomment the script tag to load index.js","info":"```html\n<p id=\"div40\">\n This is some text and I want to tell you \n that my age is <b id=\"myage\">140</b>.\n This will be updated direct from Node-RED\n using a <code>uib-update</code> node.\n</p>\n<p id=\"div41\">\n This is some more text and I want to tell you \n that the temperature today is \n <b id=\"todaytemp\" class=\"error\">-20</b>℃. This will\n be updated using front-end code in\n <code>index.js</code>\n</p>\n<p id=\"div42\">\n <uib-var variable=\"myquote\" type=\"html\">(waiting for quote)</uib-var>\n</p>\n```\n\nDon't forget to also uncomment the line\nthat loads the index.js file if you want\nto play with the next example as well.\n\nWe could, of course, insert this HTML\ndynamically from Node-RED using the \nuib-element node.","x":400,"y":380,"wires":[]},{"id":"d3b66a1c8aafb1f4","type":"uib-update","z":"36e46a8812418a38","name":"Update myage span content \\n (#myage css selector)","topic":"","mode":"update","modeSourceType":"update","cssSelector":"#myage","cssSelectorType":"str","slotSourceProp":"payload","slotSourcePropType":"msg","attribsSource":"{\"class\":\"warning\"}","attribsSourceType":"json","slotPropMarkdown":false,"x":500,"y":460,"wires":[["230b14e3f0320ec0"]]},{"id":"a1c5793fee1d129e","type":"inject","z":"36e46a8812418a38","name":"Random myage (note need for \\n topic so that cached correctly)","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"30","crontab":"","once":true,"onceDelay":"15","topic":"update-myage","payload":"$formatInteger($random() * 100, \"0\")\t","payloadType":"jsonata","x":230,"y":460,"wires":[["d3b66a1c8aafb1f4"]]},{"id":"230b14e3f0320ec0","type":"link out","z":"36e46a8812418a38","name":"link out 65","mode":"link","links":["73283e35f23ba905"],"x":665,"y":460,"wires":[]},{"id":"3aae18802d1de054","type":"comment","z":"36e46a8812418a38","name":"Add this manually to index.js (see inside) - it does updates from the front-end instead","info":"```javascript\nuibuilder.onChange('msg', (msg) => {\n If (msg.topic === 'todaytemp') {\n // Use innerHTML if needed\n $('#todaytemp').innerText = msg.payload\n }\n})\n```","x":390,"y":540,"wires":[]},{"id":"d5772ba475aa309a","type":"link out","z":"36e46a8812418a38","name":"link out 66","mode":"link","links":["73283e35f23ba905"],"x":665,"y":600,"wires":[]},{"id":"07cd2f6a6d08658c","type":"inject","z":"36e46a8812418a38","name":"Random todaytemp (note need for \\n topic so that front-end code handles correctly)","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"30","crontab":"","once":true,"onceDelay":"15","topic":"todaytemp","payload":"$formatInteger($random() * 100 - 50, \"0\")\t","payloadType":"jsonata","x":280,"y":600,"wires":[["d5772ba475aa309a"]]},{"id":"532ec0e5a5152d88","type":"inject","z":"36e46a8812418a38","name":"Set command","props":[{"p":"_uib","v":"{\"command\":\"set\",\"prop\":\"myquote\",\"value\":\"\"}","vt":"json"}],"repeat":"","crontab":"0 7-21 * * *","once":true,"onceDelay":"15","topic":"","x":180,"y":780,"wires":[["1118681bef5c126b"]]},{"id":"1118681bef5c126b","type":"http request","z":"36e46a8812418a38","name":"","method":"GET","ret":"obj","paytoqs":"ignore","url":"https://zenquotes.io/api/random","tls":"","persist":false,"proxy":"","insecureHTTPParser":false,"authType":"","senderr":false,"headers":[],"x":350,"y":780,"wires":[["b69aa587eb50ae6f"]]},{"id":"b69aa587eb50ae6f","type":"change","z":"36e46a8812418a38","name":"Upd set value from web response","rules":[{"t":"set","p":"_uib.value","pt":"msg","to":"payload[0].h","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":580,"y":780,"wires":[["45c30769766809e0"]]},{"id":"45c30769766809e0","type":"link out","z":"36e46a8812418a38","name":"link out 67","mode":"link","links":["d5ffe9a264b1c424"],"x":765,"y":780,"wires":[]},{"id":"85b05013bc65a8ef","type":"comment","z":"36e46a8812418a38","name":"This time, lets use the uib-var front-end component. (We won't cache this one) \\n The uibuilder set command is used to change the variable in the front-end. \\n In this case, we will tell the component to use HTML - see the first comment contents above.","info":"","x":420,"y":700,"wires":[]}]
It will also be included as an example in the next release (v6.7).
