# 🌐 UIBUILDER New Release! v7.3.0 - Templates and documentation updates

**URL:** <https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [27 May 2025 19:29 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297 "2025-05-27T19:29:26Z")\
**Posts on this page:** 5\
**Page:** 1

<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:** [27 May 2025 19:29 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297/1 "2025-05-27T19:29:26Z")

</div>

> **[node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder)**
>
> Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code/low-code features.

I am happy to report that I've just published v7.3.0 of UIBUILDER. Details of changes below.

A big shift in how templates are managed in this release which should make future updates a lot easier to manage and more flexible.

Also in the templates, please do check out the fact that the included `more` element has been updated in all templates to include the `uib-topic="more"` attribute. So now, you can simply send a message to the uibuilder node and have the payload immediately appear - just make sure that `msg.topic` is set to "more". 😃 The payload can be a number or text and can include HTML in the text.

* * *

## CHANGES

### 📌 Highlights

- A new documentation section called "Creating Web UI's" has been added. The idea is to provide quick-reference guides on how to create common page elements and layouts using UIBUILDER. Some of the articles that were pare of the "Using UIBUILDER" section have been moved to this new section for clarity. _What else needs to go here? Please let me know in the Node-RED Forum._

- UIBUILDER standard templates can now be external repositories, loaded via Degit. You could already load an arbitrary template this way but now some of the standard templates have been moved so that they can be more easily maintained. The selected template now also shows a description.

- The templates now all have an updated `<div id="more" uib-topic="more"></div>` element. While this has been a staple of the templates and examples for a while, the addition of the `uib-topic="more"` attribute means that you can now show the content of a msg.payload without having to write any JavaScript code. Don't forget to set `msg.topic` to `"more"` so that the uibuilder client library knows where to send the message.

Don't forget to try loading the updated templates to see the improvements.

### Documentation

- **NEW** Section: "Creating Web UI's"
  - **NEW** (Draft) Creating a web app - How to create a web app using UIBUILDER
  - **NEW** Grid layouts - Creating a content-heavy grid layout using CSS Grid
  - **NEW** Dashboard layouts - Creating a dashboard-style layout using CSS Grid
  - **NEW** Forms: User input handling - Handling input using forms and other input elements
  - _SOON_ Tables
  - _SOON_ Charts
  - _SOON_ Maps
  - _SOON_ Articles
  - _SOON_ Lists
  - _SOON_ Cards

Please let me know if you want to see other content in this section.

### `uib-brand.css` styles & variables

- Improved default font specifications based on [Modern Font Stacks](https://github.com/system-fonts/modern-font-stacks).

### uibuilder client library

- TypeScript definition files now included. This gives a much better experience when using the client library. It works for JavaScript not just TypeScript. All of the templates now also contain copies.

### Runtime Plugin

- **FIX** Error in `RED.util.uib.dp` that always returned a single decimal place if zero dp's were requested.
- **NEW** `RED.util.uib.truthy(val)` - Returns true if the value is truthy. This is useful for checking if a value is set or not. See the details in the documentation.

### Node: `uibuilder`

- Updated template processing to allow standard templates to be external.
- Templates now show a description in the Editor config.
- Removed templates: `esm-blank-client`, `esm-vue3-nobuild`, `iife-blank-client`, `iife-vue3-nobuild`, `svelte-basic`, `vue2-bootstrap`,`vue2-simple`. Reference copies placed in the [deprecated templates repository](https://github.com/TotallyInformation/deprecated-uibuilder-templates).
- External templates added: "Extended IIFE example", "Simple external ES module", "External Svelte", "Vie3 no build step, IIFE client". Each with a link to the corresponding GitHub repository.
- **FIXED** The `uibuilder` node's "Node details" button now correctly opens the instance settings page in the Node-RED Editor. It was previously trying to open a non-existent page.
- **FIXED** The `uibuilder` node's "Node details" button now correctly opens the instance details page.

### Background code improvements

- Moved the uibuilder node's `uib` var to `nodes/libs/uibGlobalConfig.cjs` as a module. Enables being able to require it rather than pass it in libs and other nodes. Another step towards a more modular codebase.
- Started renaming js files to better indicate whether they use script/CommonJS (`*.cjs`), or ESM (`*.mjs`). Mostly to help with ESLINT.
- Lots of code cleanup and linting to make the code more readable and maintainable.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [27 May 2025 22:04 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297/2 "2025-05-27T22:04:39Z")

</div>

I've tried uibuilder 3 or 4 times so far, and found it above my technical paygrade each time...  
...but every time you post, I get drawn in again. Please stop 🤣

I'm a little disillusioned with DB2 at the moment, and having previously committed to dashboard 1, flexdash, and dashboard 2, I'm losing confidence in finding a stable and usable solution...

---

<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:** [27 May 2025 22:50 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297/3 "2025-05-27T22:50:59Z")

</div>

> [@Paul-Reed](#):
>
> I've tried uibuilder 3 or 4 times so far, and found it above my technical paygrade each time...  
> ...but every time you post, I get drawn in again. Please stop

🤣 I ain't going anywhere Paul! I'll keep at it until you realise how easy it all is!

> [@Paul-Reed](#):
>
> I'm losing confidence in finding a stable and usable solution...

I've always tried to be completely fair to the Dashboard solutions. But they all share the same issues. UIBUILDER was specifically designed to avoid those.

Investing time learning the basics of HTML, CSS, and native JS HTML API's means that you are on a continual upwards feature train that avoids the major, disassociative jumps you get with front-end frameworks.

UIBUILDER major version jumps have now mostly ended their actual breaking changes. The last couple have mostly been about changing minimum node.js versions in line with Node-RED. There are some really exciting changes to CSS coming soon for example that will build on what exists but make things easier all round.

What we are still short of with UIBUILDER is enhanced web components. Again, web components are fully standards based (thought you can use frameworks such as LIT or Svelte to build them as well) and so usable just about anywhere. Adding UIBUILDER enhancements is trivial and honestly not even always needed, most of [the ones I've created](https://wc.totallyinformation.net/) don't have anything extra for UIBUILDER. Of course, you can use 3rd-party ones as well. I'll continue building them but until I retire next year, time is somewhat constrained.

Happy to talk through some ideas if you want to. My web components site has loads of things I want to work on when time permits.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [28 May 2025 12:30 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297/4 "2025-05-28T12:30:00Z")

</div>

Thanks Julian  
One of the big advantages that DB2 has, is that chart data, switch status, etc, is saved, so when a chart is viewed for example on a phone, the chart is fully populated as soon as it connects, along with switch status, whereas with UIBUILDER, I seem to recall that I had to create workarounds - saving chart data & redrawing the charts from context data.  
Having said that, I'm currently doing that with DB2 anyway, as I'm using chart.js in ui template nodes, in preference to the DB2 chart node...

---

<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:** [28 May 2025 14:51 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v7-3-0-templates-and-documentation-updates/97297/5 "2025-05-28T14:51:37Z")

</div>

> [@Paul-Reed](#):
>
> whereas with UIBUILDER, I seem to recall that I had to create workarounds - saving chart data & redrawing the charts from context data.

I think that is my poor explanation of how to do things.

UIBUILDER deliberately avoided the issues that DB2 now finds itself with in regard to caching. There are simply too many different caching requirements and edge-cases and I wanted to give more flexibility.

So with UIBUILDER, you use the `uib-cache` node. That has several modes of operation and, of course, you can use multiple of them to have different cache modes in parallel. I often use 2 link-in nodes in front of uibuilder nodes. 1 goes direct, the other goes via the cache.

Cache replays can be triggered automatically when a new client connects by feeding the connect control msg back to the cache input. But you can use any flow to trigger them.

With UIBUILDER, you are also typically sending a lot less data to the connected clients.

> [@Paul-Reed](#):
>
> as I'm using chart.js in ui template nodes, in preference to the DB2 chart node...

And you have highlighted one of the main issues I have with pre-canned dashboards. As your needs mature, you inevitably end up falling off a cliff-face of complexity. And then you are fighting the framework instead of it helping. You go from not needing to know any front-end stuff to suddenly needing to know (a) HTML, (b) CSS, (d) JavaScript, (e) VueJS, (f) Vuetify, (g) D2 caching mechanisms, etc.

In my own view, unless you know for sure that you will never want to go beyond what the Dashboard has already done for you, you are better off starting with the slightly more complex to get going UIBUILDER. Or at least planning for change up-front.

I'm not criticizing D1/D2, just pointing out that each approach has its strengths and weaknesses.

Don't forget, there is a comparison page between UIBUILDER and D2 that I occasionally update and correct as I learn things and as both approaches mature.

> **[UIBUILDER Documentation v7](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/using/compare-d2)**
>
> UIBUILDER Documentation v7