# Interesting Things to do With a ui-text Node

**URL:** <https://discourse.nodered.org/t/interesting-things-to-do-with-a-ui-text-node/99452>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [19 October 2025 13:32 UTC](https://discourse.nodered.org/t/interesting-things-to-do-with-a-ui-text-node/99452 "2025-10-19T13:32:28Z")\
**Posts on this page:** 2\
**Page:** 1

<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:** [19 October 2025 13:32 UTC](https://discourse.nodered.org/t/interesting-things-to-do-with-a-ui-text-node/99452/1 "2025-10-19T13:32:28Z")

</div>

I knew that a `ui-text` node value could have HTML injected but I hadn't realised just how useful this can be, (and I didn't realise that `msg.ui_update.label` had the same option) so I wondered if anyone else was in the same position. This demonstrates how the label & value entities of a text widget can be styled;

Note: I used a change node because the template node is limited in what it can do.

```auto
[{"id":"6042657f3c96eec2","type":"change","z":"506727cd93754bdb","name":"Weather \\n Temperature","rules":[{"t":"set","p":"payload","pt":"msg","to":" '<p> <span style=\"font-weight:normal;\">Temperature: </span><span style=\"color:blue;\">' & $pad( $string( $round($$.temperature, 1) ), 2, \".0\"\t) & '°C</span></p>'","tot":"jsonata"},{"t":"set","p":"ui_update.label","pt":"msg","to":"'<p>Forecast For Current Hour: <b> ' & $$.description & '</b></p>'","tot":"jsonata"}],"action":"","property":"","from":"","to":"","reg":false,"x":1470,"y":6140,"wires":[["3b5d4b371e418732"]],"info":"$pad($string($round($$.forecastWeatherData[0].temperature, 2)), 4, \".00\") & \"°C\""},{"id":"3b5d4b371e418732","type":"ui-text","z":"506727cd93754bdb","group":"988a9fdb7648fba0","order":1,"width":"6","height":"1","name":"Temperature","label":"Forecast For Current Hour","format":"{{msg.payload}}","layout":"row-spread","style":false,"font":"","fontSize":16,"color":"#717171","wrapText":false,"className":"","value":"payload","valueType":"msg","x":1650,"y":6140,"wires":[]},{"id":"45dbaffb6a424892","type":"inject","z":"506727cd93754bdb","name":"Text Widget Loader","props":[{"p":"temperature","v":"10.4","vt":"num"},{"p":"topic","vt":"str"},{"p":"description","v":"Windy with Rain","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1290,"y":6140,"wires":[["6042657f3c96eec2"]]},{"id":"988a9fdb7648fba0","type":"ui-group","name":"Text Widget Example","page":"5d43941d3f14c655","width":"6","height":1,"order":1,"showTitle":false,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"5d43941d3f14c655","type":"ui-page","name":"Text Input","ui":"b810194ea14e3502","path":"/text-input","icon":"cursor-text","layout":"grid","theme":"5075a7d8e4947586","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":24,"className":"","visible":"true","disabled":"false"},{"id":"b810194ea14e3502","type":"ui-base","name":"Dashboard 2 Examples","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-control","ui-notification"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":5,"showDisconnectNotification":true,"allowInstall":true},{"id":"5075a7d8e4947586","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#ffffff","groupBg":"#eeeeee","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"6px","groupBorderRadius":"4px","widgetGap":"12px","density":"default"}},{"id":"120ac2fdb4964b3b","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

```

There are a load of dynamic properties for the `ui-text` node but this shows how to style bits that are not covered by them.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [18 November 2025 13:33 UTC](https://discourse.nodered.org/t/interesting-things-to-do-with-a-ui-text-node/99452/2 "2025-11-18T13:33:22Z")

</div>

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.