# 🎉 \[uibuilder new release\] v5.1.1 - Some nice new features and illustration of future features

**URL:** <https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [28 June 2022 20:36 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479 "2022-06-28T20:36:01Z")\
**Posts on this page:** 19\
**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:** [28 June 2022 20:36 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/1 "2022-06-28T20:36:01Z")

</div>

Hopefully you will be as excited as I am about some of the new features in this release!

Most notably, a brand new client library in both ESM and IIFE (UMD) versions so that you can start experimenting with browser-based ES Modules if you wish to or you can carry on using the simple script tag to load the more traditional IIFE version if you prefer.

The new client library introduces the concept of configuration-driven UI's. Create a UI partially or fully from JSON data either from files, web API's or simply from messages sent from Node-RED. Completely up to you. It works with standard HTML elements but also with **ANY** framework! Including Web Components, VueJS (v2 and v3), Svelte, etc. Check out the client documentation in the Tech Docs: [Using the modern front-end client (totallyinformation.github.io)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/uibuilder.module).

Along with the new UI feature comes the first experimental UI node. `uib-list` allows you to dynamically create a list on any web page connected to uibuilder simply by sending an array or object of data. The data is also cached and so is automatically sent when a client connects. A little simplistic in this version but please check out the roadmap for some of the goodies to come: [Roadmap (totallyinformation.github.io)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/roadmap?id=next-these-are-things-that-need-to-be-done).

There are also the usual updates and bug fixes. A potentially useful update for some is the addition of a `pageName` property on the client connect/disconnect control messages. This allows you to make decisions about whether to respond based on the source page - useful in multi-page apps.

Also new is the `connections` counter on control messages that let you know whether a client is a fresh page load or a reconnection. This is already added as an option to the `uib-cache` node so that you can optimise cache replay events. It will be added to other caching nodes such as `uib-list` in a future release.

As always, please let me know what you think and about any bugs.

Many thanks to the various people who have helped me with this release both with ideas and with testing.

Regards, Julian.

* * *

Note that this is likely to be the last of the v5 series (barring small fixes). The next main release should be v6 with a move to Node.js v14 LTS as a minimum version. That will be released after Node-RED v3 is released.

* * *

## Changelog

### Fixed

- Improved module path search to allow an array of locations. Removes spurious warning about [socket.io](http://socket.io) client not being found.
- `/uibuilder/ping` now correctly returns 204 (no content) status not 201.
- `web.js`::`buildHtmlTable` - over-optimised regex broke the table cells, now fixed.
- Connected control message now correctly contains the client id and client IP address. The client id does not change as much as the \_socketId, it is saved in browser local storage so will be the same across sessions and multiple windows/tabs.
- `uib-sender` was not using topic defined in settings. If present, that overrides msg.topic.
- `uibuilder` node - Editor: Add library had been over-optimised and wasn't working in the right order. Now fixed. This also fixed a problem with url rename.

### Changed

- `clientId` is now session stable. That means that it does not change unless the client browser is restarted. It is now also included in more messages. For control messages, it will be found as a msg property. For `_ui` related messages, it will be a property under `msg._ui`. Any other uses will appear under `msg._uib`.

- All code now Linted to "Standard JavaScript" with node.js v12 and front-end to ECMA2019. Null/undefined guards put in place.

- Package.json: Changed homepage to point to Tech Docs on [github.io](http://github.io).

- Client libraries and css available on `../uibuilder/` path as well as on `./` path for consistency with other server paths.

- Client connect, disconnect and error control messages (uibulder node output port #2) now contain more information. Includes: client version, clientId, Client IP address, page name, number of (re)connections.

- `express-session` and `jsonwebtoken` dependencies removed as no longer in use.

- Editor:

- `uib-cache` node

- `package-mgt.js`:

- Old client library `uibuilderfe.js`

### New

- `uib-brand.css` - will eventually be the new default uibuilder CSS. It is light/dark switchable both manually and by browser preference. Still under development, this **WILL CHANGE** , probably quite a bit. There are still some variables that are needed in order to be able to sensible control things like spacing and sizing.

- **New ES Module front-end client library** (`uibuilder.esm.min.js`)

- **New IIFE Module front-end client library** (`uibuilder.iife.min.js`)

- **New Node** - `uib-list`

- Runtime

---

<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 June 2022 20:42 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/2 "2022-06-28T20:42:36Z")

</div>

Also forgot to say that there are a couple of new front-end code templates that illustrate the use of the new client library and a new example in the import library that illustrates not only the new client libraries but also the new `uib-list` node.

---

<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:** [29 June 2022 06:21 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/3 "2022-06-29T06:21:59Z")

</div>

Thank you!  
Is there some code-snippet to look at how the new functions/methods have to be used?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 June 2022 06:54 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/4 "2022-06-29T06:54:00Z")

</div>

Morning Julian, just installed this on an instance of v3-beta.3 that has never had uibuilder installed. Got this `Uncaught Exception`...

```auto
======================================= [UIBUILDER PREINSTALL] =======================================
c:\users\Stephen\node-red-1881\node_modules\node-red-contrib-uibuilder\bin\uibpreinstalljs:10
Please ignore warnings about missing peer dependencies for jquery
c:\users\Stephen\node-red-1881\node_modules\node-red-contrib-uibuilder\bin\uibpreinstalljs:11
==================================================================================================

c:\users\Stephen\node-red-1881\node_modules\node-red-contrib-uibuilder\bin\uibpreinstalljs:12

added 66 packages, and changed 1 package in 12s
c:\Program Files\nodejs\node_modules\npm\lib\npm.js:366
29 Jun 07:47:54 - [info] Installed module: node-red-contrib-uibuilder
packages/node_modules/@node-red/util/lib/log.js:94
C:\ProgramData\npm
c:\Program Files\nodejs\node_modules\npm\lib\npm.js:366
29 Jun 07:47:57 - [error] [uibuilder:package-mgt:readPackageJson] Failed to read package.json file from c:\users\Stephen\node-red-1881\projects\v3-testing\uibuilder
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [warn] [uibuilder:package-mgt:getUibRootPackageJson] Could not read c:\users\Stephen\node-red-1881\projects\v3-testing\uibuilder\package.json. Creating minimal version.
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [warn] [uibuilder:package-mgt:getUibRootPackageJson] No uibRoot/package.json file, creating minimal file.
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [info] Added node types:
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [info] - node-red-contrib-uibuilder:uibuilder
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [info] - node-red-contrib-uibuilder:uib-sender
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [info] - node-red-contrib-uibuilder:uib-cache
packages/node_modules/@node-red/util/lib/log.js:94
29 Jun 07:47:57 - [info] - node-red-contrib-uibuilder:uib-list
packages/node_modules/@node-red/util/lib/log.js:94
{
  "version": "5.1.0",
  "name": "uib_root",
  "description": "Root configuration and data folder for uibuilder",
  "scripts": {},
  "homepage": "",
  "bugs": "",
  "author": "",
  "license": "Apache-2.0",
  "repository": "",
  "uibuilder": {
    "packages": {}
  },
  "_id": "uib_root@5.1.0",
  "extraneous": false,
  "path": "c:\\users\\Stephen\\node-red-1881\\projects\\v3-testing\\uibuilder",
  "_dependencies": {},
  "devDependencies": {},
  "peerDependencies": {}
}
c:\Program Files\nodejs\node_modules\npm\lib\npm.js:366
29 Jun 07:47:59 - [red] Uncaught Exception:
packages/node_modules/node-red/red.js:501
29 Jun 07:47:59 - [error] TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at UibPackages.updateInstalledPackageDetails (c:\users\Stephen\node-red-1881\node_modules\node-red-contrib-uibuilder\nodes\libs\package-mgt.js:297:22)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
packages/node_modules/@node-red/util/lib/log.js:94
Process exited with code 1

```

Line 297 points to this...

```auto
        // Make sure we have package details for all installed packages
        await Object.keys(lsParsed.dependencies).forEach( async pkgName => {
            await this.updIndividualPkgDetails(pkgName, lsParsed)
        })

```

UPDATE...

In order to get node-red running once more, I had to adjust the code...

```auto
        await Object.keys(lsParsed.dependencies || {}).forEach( async pkgName => {
            await this.updIndividualPkgDetails(pkgName, lsParsed)
        })

```

---

<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:** [29 June 2022 08:08 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/5 "2022-06-29T08:08:11Z")

</div>

> [@fmarzocca](#):
>
> Is there some code-snippet to look at how the new functions/methods have to be used?

Use the Node-RED import menu, go to examples then look for uibuilder. You will find the `uib-list` example there, import it and it should give you examples of both new client libraries along with the `uib-list` 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:** [29 June 2022 08:09 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/6 "2022-06-29T08:09:55Z")

</div>

Thanks Steve, will get a fix out. Andy also spotted it.

If anyone needs a work around, from a server command line:

```auto
// go to the uibRoot folder
cd ~/.node-red/uibuilder
// Install the dummy `aaa` package
npm install aaa --save
// restart node-red

```

That should do it.

I'll get a fix out ASAP.

---

<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:** [29 June 2022 08:38 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/7 "2022-06-29T08:38:10Z")

</div>

Once again, thanks Steve for the pointer. v5.1.1 with the fix has now been published.

---

<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:** [29 June 2022 12:26 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/8 "2022-06-29T12:26:50Z")

</div>

> [@TotallyInformation](#):
>
> go to examples then look for uibuilder

Tested `uib-list`. Cool!  
I suppose it can also be re-worked a little to have a new node: `uib-chart`, or maybe with a little of code on the fronted the `uib-list` node can also be used to populate a chartjs.

---

<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:** [29 June 2022 13:19 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/9 "2022-06-29T13:19:16Z")

</div>

> [@fmarzocca](#):
>
> Tested `uib-list`. Cool!

🙂

> [@fmarzocca](#):
>
> I suppose it can also be re-worked a little to have a new node: `uib-chart`

The reason I started with list is because it is a set of native HTML tags. I'll undoubtedly do a `uib-table` next because people find tables hard to build by hand.

A chart is more complex because it needs an external library. I really wanted to do a web component for a chart but it turns out that most chart libraries really don't play nicely with ESM's. Also, there is a lot of complexity to a chart.

Having said that, yes, a chart is certainly needed and is on the cards at some point.

> [@fmarzocca](#):
>
> or maybe with a little of code on the fronted the `uib-list` node can also be used to populate a chartjs.

Not quite how the node works. I need to give some more thought as to how a chart node should work and the best way to include the external library.

---

<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:** [29 June 2022 14:08 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/10 "2022-06-29T14:08:23Z")

</div>

> [@TotallyInformation](#):
>
> A chart is more complex because it needs an external library.

Yes, of course, but this is not a problem of uibuilder. I thought at the chart because you need a node to send the data from NR to the frontend. Once the data is received (and I think `uib-list` is good for this) then it's a job of the frontend designer.

---

<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:** [29 June 2022 19:21 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/11 "2022-06-29T19:21:21Z")

</div>

> [@fmarzocca](#):
>
> I think `uib-list` is good for this

I think you may have misinterpreted how the uib-list node works. It sends a set of instructions to the client that consist of tag names and properties. It literally sends the instructions to the uibuilder client library that gets it to do what you would have to do to build the same thing using code.

Click the checkbox in the node that sends the output as a message instead of to uibuilder and add a debug node and you will see the output. Here is an example:

```auto
{
    "_msgid": "62fa1d879a358f1a",
    "topic": "auto-create-list",
    "_uib": {
        "originator": "ee38039276e446bb"
    },
    "_ui": [
        {
            "method": "remove",
            "components": [
                "#li1"
            ]
        },
        {
            "method": "add",
            "components": [
                {
                    "type": "ol",
                    "id": "li1",
                    "attributes": {},
                    "components": [
                        {
                            "type": "li",
                            "slot": "LI One"
                        },
                        {
                            "type": "li",
                            "slot": "LI Two"
                        },
                        {
                            "type": "li",
                            "slot": "LI Three"
                        },
                        {
                            "type": "li",
                            "slot": "LI Four"
                        }
                    ],
                    "parent": "#aparent"
                }
            ]
        }
    ]
}

```

You can see that it first removes the existing list element if it exists then rebuilds it by sending each element starting with the parent `ol` tag and then a series of `li` tags as children.

So a chart would need a completely different set of instructions.

You can also see that this isn't really a terribly efficient way to do things. which is why I've been looking at web components. With a web component, you can build the UI structure and logic into the library and Node-RED only has to send the actual data. More compact, less data.

The node method is OK for a lot of things but for something really complex, I'm not convinced it is quite the right approach. But is **IS** simple and very node-red like. It is also incredibly flexible.

> [@fmarzocca](#):
>
> Once the data is received (...) then it's a job of the frontend designer.

That is indeed the better approach but it needs front-end libraries or frameworks to make it easy to consume and as you've recently discovered, ones that are both easy to use and look good are hard to come by.

I very much doubt I'll have the time for some years yet to be able to build out even one of these approaches on my own let alone both. So unless others join in, it will remain a slow and steady progress. One of the purposes of the `uib-list` node is to build an exemplar for this approach so that others can also contribute fairly easily. That is true for the web-components library as well which hopefully will become an exemplar for developing the other approach.

---

<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:** [30 June 2022 09:03 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/12 "2022-06-30T09:03:55Z")

</div>

> [@TotallyInformation](#):
>
> I think you may have misinterpreted how the uib-list node works.

Yes, I did! Thank you for clarification.

But now that it is clear, I have some consideration....

With `uib-list` you are moving the code from the frontend web to `uibuilder`. This is certainly useful but my question is: is this really within the scope of `uibuilder`?.

It is certainly convenient to have a ready-made list structure, but I'll still have to put my hands on it for specific customizations of styles/ordering/multi-selection/etc.

In addition, it really depends upon the framework the user is using. During my tests with Quasar, for example, I made a List with this code:

```auto
   <q-list bordered separator>
      <q-item clickable v-ripple>
        <q-item-section>Single line item</q-item-section>
      </q-item>

```

(that is not compatible with the format received from `uib-list`, but you can add icons, multi-line captions, styles, etc.)

Again, during my tests, I have realized that the hardest effort is not in drafting the main layout, but in handling each widget (button, list, led, dropdown, switch, gauge, etc) with a model/data/topic in `index.js`. (`uibuilder.eventSend` is on this path, but instead of sending a "`click`" event, it should send the associated data (true/false, list-selected-item, slider-value, etc. ) With the help of `vue-components` (to load repetitive snippet of html code) or `router-view` (to load full pages into the layout), the html is not a so big problem. The PITA remains in the `js`. IMHO, efforts should be focused on this: providing the user with a ready-made structured model to manage his widgets. The frontend layout should be left at his free choice.

You made an exceptional tool of great potential, congratulations. Giving the user the ability to communicate to and from Node Red is unvaluable. I could make a full web-app with just `uibuilder.send` and `uibuilder.onChange()`!

I have not yet investigated web-components, but if they go towards a simplification of the model handling code, it will be the target.

> [@TotallyInformation](#):
>
> So unless others join in, it will remain a slow and steady progress.

I think the whole community should be grateful for the work you are doing. I'm sorry I can't help you with developing, but I don't think my coding skills are up to par.

---

<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:** [30 June 2022 11:37 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/13 "2022-06-30T11:37:02Z")

</div>

> [@fmarzocca](#):
>
> With `uib-list` you are moving the code from the frontend web to `uibuilder`. This is certainly useful but my question is: is this really within the scope of `uibuilder`?.

That is an excellent question 🙂 and the truth is that I'm not completely convinced. But that is why `uib-list` is marked as experimental. I absolutely want feedback like this because in the past there have been lots of calls for uibuilder to have a similar approach to Dashboard, e.g. providing lots of nodes that create UI elements.

> [@fmarzocca](#):
>
> It is certainly convenient to have a ready-made list structure, but I'll still have to put my hands on it for specific customizations of styles/ordering/multi-selection/etc.

Yes indeed. So where should the line be drawn between something that is quick and easy - especially for folk with no HTML or coding experience at all and something that helps people with coding experience but who need tools to speed up their design processes? And everything in-between.

Also, the reason that I added an option to output the `msg._ui` instead of sending it direct was to give people a quick-start from which to work should they need/want to do things that the node doesn't do.

Truth is that there isn't a one-size-fits-all. You can see that with Dashboard. As people develop more complex Dashboards, they eventually get to a point where they have to start coding and Dashboard's internal complexity actually makes that relatively hard (you need to know not only HTML/CSS/JS but also how Angular v1 works AND how Dashboard itself works).

> [@fmarzocca](#):
>
> In addition, it really depends upon the framework the user is using. During my tests with Quasar, for example, I made a List with this code:
> 
> ```auto
> <q-list bordered separator>
> <q-item clickable v-ripple>
> <q-item-section>Single line item</q-item-section>
> </q-item>
> 
> ```
> 
> (that is not compatible with the format received from `uib-list`, but you can add icons, multi-line captions, styles, etc.)

No but `uib-list` is aimed at people who need a simple list but either don't have the coding skills or need something fast. And it isn't a complete example of course, only an experiment.

What you CAN do with the new clients is still generate that UI element purely from Node-RED if you want to. After all, that's actually what `uib-list` does but it works with `<ol>` and `<li>` tags instead of the Quasar equivalents.

The data schema that `msg._ui` uses can build ANY UI element from any framework. `uib-list` is simply an example of a wrapper around that data schema. It illustrates a possible approach for low/zero code UI creation.

> [@fmarzocca](#):
>
> Again, during my tests, I have realized that the hardest effort is not in drafting the main layout, but in handling each widget (button, list, led, dropdown, switch, gauge, etc

🙂 Yup!

> [@fmarzocca](#):
>
> with a model/data/topic in `index.js`. (`uibuilder.eventSend` is on this path, but instead of sending a "`click`" event, it should send the associated data (true/false, list-selected-item, slider-value, etc. )

Ah, so now you are getting close to one of the reasons I also started writing some web components. How to capture and return the "interesting" data from each component. Given that there are 10's of thousands of components in the wild across dozens of frameworks, all of which work in their own way.

We are back to the problem that uibuilder either has to back a specific framework (which experience shows is a bad move because frameworks don't always age well) or has to find ways to work without specific framework lock-in.

The "ideal" solution to this would be for someone else to build framework-specific solutions around uibuilder as a core.

> [@fmarzocca](#):
>
> Giving the user the ability to communicate to and from Node Red is unvaluable. I could make a full web-app with just `uibuilder.send` and `uibuilder.onChange()`!

👍

> [@fmarzocca](#):
>
> I think the whole community should be grateful for the work you are doing. I'm sorry I can't help you with developing, but I don't think my coding skills are up to par.

Well, many thanks for your kind words. And don't worry about coding, it is great that you are taking an active part in the discussion and testing, it really helps clarify things and drive out issues.

---

<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:** [30 June 2022 11:50 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/14 "2022-06-30T11:50:53Z")

</div>

> [@TotallyInformation](#):
>
> especially for folk with no HTML or coding experience at all

they should go with Node Red Dashboard, no question here.

> [@TotallyInformation](#):
>
> No but `uib-list` is aimed at people who need a simple list but either don't have the coding skills or need something fast.

IMHO this is not the scope of `uibuilder`. It is a professional tool for those (skilled) who want specific customization in their NR.

> [@TotallyInformation](#):
>
> The "ideal" solution to this would be for someone else to build framework-specific solutions around uibuilder as a core.

I support this.

---

<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:** [30 June 2022 12:40 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/15 "2022-06-30T12:40:52Z")

</div>

> [@fmarzocca](#):
>
> they should go with Node Red Dashboard, no question here.

Except that the current Dashboard is closing in on end-of-life. The underlying framework is no longer under active support. Currently, there is no obvious alternative.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 July 2022 20:00 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/16 "2022-07-19T20:00:16Z")

</div>

Hello Julian ..

I switched today to the new `uibuilder.esm.js` .. all is good with my application that uses a build step.  
One thing i noticed is that because i wasnt loading a css file (all css was in each .vue file)  
the `uib-brand.css` file was loading but clashing with existing bootstrap-vue css styles.

So i tried to pass the `loadStylesheet` option setting it to false .. but that didnt make a difference.  
As a workaround i loaded a fake css so the code responsible of loading `uib-brand.css` wouldnt kick in ?

```javascript
// uibuilder.debug(true);
uibuilder.start({ ioNamespace: "/navbar", loadStylesheet: false });

```

Also `uibuilder.debug(true);` doesnt seem to enable debug msgs

---

<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:** [19 July 2022 20:14 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/17 "2022-07-19T20:14:17Z")

</div>

> [@UnborN](#):
>
> I switched today to the new `uibuilder.esm.js` .. all is good with my application that uses a build step.

Great! Worth a WIKI write up maybe?

> [@UnborN](#):
>
> `loadStylesheet` option setting it to false

oops, a bug 🙂

> [@UnborN](#):
>
> Also `uibuilder.debug(true);` doesnt see to enable debug msgs

Ah, missed documentation change.

[Using the modern front-end client (totallyinformation.github.io)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/uibuilder.module?id=conditional-logging)

> Internal logging is much improved over previous versions of this library. There is now a dedicated internal `log` function which adds colour highlighting to browsers that support it in the dev tools console. That includes all Chromium-based browsers and Firefox.
> 
> You can alter the amount of information that the uibuilder library outputs to the console by changing the `logLevel` with `uibuilder.logLevel = 4` where the number should be between 0 and 5. you can set that at any time in your code, however it will generally be most useful set _before_ calling `uibuilder.start()`.
> 
> The default level is set to 1 (warn). The levels are: 0 'error', 1 'warn', 2 'info', 3 'log', 4 'debug', 5 'trace'.
> 
> Changing the log level outputs an info note to the console telling you what the level is.
> 
> The log function is also available to your own code as `uibuilder.log(level, prefix, ...outputs)`.

PS my thumb is in a pot at the moment and will be for a few weeks so progress may be slow for a while.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [19 July 2022 20:39 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/18 "2022-07-19T20:39:05Z")

</div>

the new module is much easier / cleaner when using a bundler.  
and i also switched to Vite because parcel-bundler(v1) was having some issues ..  
mostly due to my lack of knowledge of how modules work  
but its good that we dont have to worry about loading the socket io client etc

> [@TotallyInformation](#):
>
> oops, a bug

nothing critical .. you comment in docs "if you haven't loaded your own." helped me get around it.  
shall i open a Github issue on this so it can tracked ?

> if you don't want the uibuilder default stylesheet (uib-brand.css) to be loaded if you haven't loaded your own.

> [@TotallyInformation](#):
>
> uibuilder.logLevel = 4

yeap .. this works fine

great work as always.

---

<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:** [19 July 2022 20:54 UTC](https://discourse.nodered.org/t/uibuilder-new-release-v5-1-1-some-nice-new-features-and-illustration-of-future-features/64479/19 "2022-07-19T20:54:37Z")

</div>

> [@UnborN](#):
>
> shall i open a Github issue on this so it can tracked ?

👍 yes please.