# Dev update: UIBUILDER v7 progress

**URL:** <https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [6 April 2024 17:33 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044 "2024-04-06T17:33:43Z")\
**Posts on this page:** 7\
**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:** [6 April 2024 17:33 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/1 "2024-04-06T17:33:43Z")

</div>

Hi all, time for a quick update on what's happening with UIBUILDER.

I've been beavering away at the code as time permits and there has been, as usual, some pretty heavy back-end improvements, notably the elimination of some external libraries and improvements in npm package handling. That's all behind-the-scenes though. Here are some more interesting highlights:

### 📌 Highlights

- You can now add a `uib-topic="mytopic"` attribute to _ANY_ HTML element. Doing so makes that element responsive to messages from Node-RED.

- Lots of extensions and improvements to the `uibrouter` front-end routing library in this release:

- Markdown improvements.

- Wherever you can use no-/low-code features that accept HTML, you can now include `<script>` tags that will be executed on load.

- A new node is available. `uib-file-list` will produce a list of files from a uibuilder instance. It automatically adjusts to the currently served sub-folder and allows filtering. Use this for producing indexes and menus.

- Handling of forms and inputs continue to improve.

- Security of the UIBUILDER repository on GitHub has been improved.

- On the `uibuilder` node's "Core" tab, the info buttons bar has changed slightly. The "Docs" button has gone (it is still on the top of panel bar anyway) and been replaced by a new "Apps" button which shows a page _listing ALL uibuilder node instances along with their descriptions where provided_.

* * *

I've not quite decided (as usual) when to stop with the updates. You can check the changelog file in the v7 branch on GitHub if you want to see what might still happen. Though certainly not all of that will go into v7.0.0. The changelog in the branch also provides more detail on what has changed. I still plan to release v7.0.0 in rough alignment with Node-RED v4.

* * *

As previously mentioned, a major version change is also the opportunity to make some changes that might impact a few people's existing flows and code. As always, I try to keep these to an absolute minimum and most of them are either rarely used (if ever) edge cases or old features that have been on their way out for several years now.

### ⚠ Potentially Breaking Changes

Note that potentially breaking changes are only introduced in major version releases such as this one. It has been a couple of years now since the last, v6, major version.

Most of these changes will _not_ impact most people but you should check through them just in case.

- If using uibuilder's custom ExpressJS server feature, **URL's are now case sensitive**

- **Minimum node.js now v18** - in line with the release of Node-RED v4, the minimum node.js version has moved from v14 to v18.

- **Rewrite of the `uibuilder.eventSend(event)` function** in the client library.

- **Removal of the uibuilderfe library**

- **Removal of the `uib-list` node**

- **Moved socket.io-client from dependencies to dev-dependencies**

- **Removed the _css auto-load_ from the client library**

- `jsdom` (using in the `uib-html` node) now tracks the latest releases again

- `ejs` package removed

- Removed Pollyfills from uibuilder editor code - shouldn't impact anyone using a browser from the last 5 years or so.

- A `uibuilder` node cannot be given a URL name of `common` as this would clash with the built-in folder of the same name that holds resources that can be shared with all instances. This was an oversight in previous releases I'm afraid, now fixed.

- The `uibuilder` node, no longer has the "_Show web view of source files (deploy before you can use it)_" option. The supporting external library was also removed. It never looked that good anyway. Please use the new `uib-file-list` node to produce a custom folder/file list and send to your own custom page.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [8 April 2024 01:33 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/2 "2024-04-08T01:33:32Z")

</div>

I don't know where you get all the time to put into this Julian - but hats off to you for the ongoing ceaseless devotion and work

Craig

---

<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:** [8 April 2024 08:32 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/3 "2024-04-08T08:32:29Z")

</div>

> [@craigcurtin](#):
>
> I don't know where you get all the time to put into this Julian

Thanks Craig 😀 The advantages of no longer having Children at home and not being into watching TV!

Generally, I tend to do short "sprints" when the mood strikes. My wife has her sewing, I have my coding.

---

<div class="post-metadata">

**Author:** ![craigcurtin](https://avatars.discourse-cdn.com/v4/letter/c/94ad74/32.png) [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)\
**Post date:** [9 April 2024 03:11 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/4 "2024-04-09T03:11:28Z")

</div>

Yeah for a while there we had no children in the nest - but somehow they have both landed back here ! No more eating dinner in front of the TV with my laptop !!

Craig

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [9 April 2024 07:55 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/5 "2024-04-09T07:55:01Z")

</div>

> [@TotallyInformation](#):
>
> The advantages of no longer having Children at home a

I enjoyed this advantaged only for a short period... Now there are grandchildren running through rooms!

---

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [9 April 2024 07:56 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/6 "2024-04-09T07:56:00Z")

</div>

> [@TotallyInformation](#):
>
> You can now define a set of external html files (that can include scripts and css just like routes) that are immediately loaded to the page. These can be defined in the initial router config when they will be loaded immediately (before routes) or can be manually loaded later. Use these for things like menu's or other fixed parts of the UI.

How this would work? I am using index.html to handle fixed parts (menu, header, footer).

---

<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:** [9 April 2024 09:50 UTC](https://discourse.nodered.org/t/dev-update-uibuilder-v7-progress/87044/7 "2024-04-09T09:50:54Z")

</div>

> [@fmarzocca](#):
>
> How this would work?

The idea might be that you could generate a menu - or \>1 for different things - in Node-RED, maybe using the new `uib-file-list` node and using the `uib-html` and `uib-save` nodes to create the menu file using a flow.

So my thinking is that you might have a load of, lets say, Markdown files that you occasionally update and/or add to. So now you will be able to watch for changes and automatically re-recreate your menu all from within Node-RED. At the same time, you are creating the menu as static HTML for maximum performance.

Obviously, if you just have a few routes then this is overkill & you can do it manually as you have done.

At some future point, I'd like to have all the jigsaw pieces to be able to use Node-RED and UIBUILDER to create Knowledge Management tools similar to Notion or Obsidian.