# Uibuilder progress \[prep for v5.1\] - new client library and experimental ui node

**URL:** <https://discourse.nodered.org/t/uibuilder-progress-prep-for-v5-1-new-client-library-and-experimental-ui-node/63748>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [10 June 2022 21:01 UTC](https://discourse.nodered.org/t/uibuilder-progress-prep-for-v5-1-new-client-library-and-experimental-ui-node/63748 "2022-06-10T21:01:13Z")\
**Posts on this page:** 1\
**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:** [10 June 2022 21:01 UTC](https://discourse.nodered.org/t/uibuilder-progress-prep-for-v5-1-new-client-library-and-experimental-ui-node/63748/1 "2022-06-10T21:01:13Z")

</div>

Hi all, been a few weeks since I shared an update with what is happening with uibuilder.

I've been creating some sample web components to work out the strengths and weaknesses and, more importantly, continue to experiment with the best ways of being able to **generate data-driven web UI's without code**.

I'm very pleased to be able to say that the new client library is about to be transferred into the dev version of uibuilder so you will soon be able to try it out a bit easier than currently (if you want to try it right now, install `totallyinformation/web-components` using the uibuilder library manager and dig around in the repo for the documentation).

The new library only works with modern browsers (2019+) but allows you to send structured data to build, destroy and update web page content from Node-RED. It also lets you load new libraries and modules and pre-load an entire UI from a JSON file. I've shared the JSON data schema previously so please do take a look at that if you are interested, it is very simple but still allows you to not only add and update both standard HTML elements, web components and also elements from any framework. You can set attributes and update properties. Nested elements are also possible and easy to do.

This is an example showing custom web components

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/e/aec58017998d3e567022b747723b7482af97f5a8.png)

However, that's not all!

Having built the framework, I can now also build nodes that talk to uibuilder and build/change UI elements in a way that is similar to how you work with Dashboard nodes BUT you can use **ANY** html element, framework element, etc. So you would **never be restricted to a specific framework**.

For example I'm currently building a simple test node that generates a list from an input array and uses standard HTML `<ul>`/`<ol>`/`<dl>` tags:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bc1fe80b6fc9af782ffd3256f3bcb8305ce688ec.png)

The flow above makes this change to the test page:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/d/3d2353041252c6b4b1857f3fd8db8814fa250ca3.png)

Creating an in-line list within one of the card components.

NO CODE AT ALL IS REQUIRED FOR THAT INTERFACE! However, in true uibuilder fashion, you CAN use code if you want to. You can mix and match code and configuration.

Obviously, the one thing not yet worked on is a layout engine such as you find in Dashboard.

I'll continue to work on this though and the early releases will be part of a uibuilder 5.1 release due soon.

* * *

This is what is already done or in-flight for 5.1

### In-flight

- Experimental list node - connect to a uib instance, retains the last object/array sent to it and auto-sends a \_ui msg on new client connection
- Add outdated markers to Editor Library tab.
- Lint to "Standard JavaScript" with node.js v12 and front-end to ECMA2019.

### 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.

### Changed

- Package.json: Changed homepage to point to Tech Docs on [github.io](http://github.io).
- Editor:
  - Added stylesheet containing a class of `emoji` which provides nicer, cross-platform, colour emojis.
  - Libraries tab:
    - Change "URL to use:" to "Estimated link:" on the Libraries tab to make it clear that it might not be correct (down to the library author).
    - Added info emoji to package name (links to package homepage).
    - Added url link to estimated library to make it easier to find out if it actually exists and exactly where.

- package-mgt.js:
  - Rewrite root package.json and package details processing for more efficiency + prettify package.json output
  - Add outdated (current/wanted/latest) to uibRoot/package.json\>uibuilder.packages in prep for update display in Editor

### 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.

- New ECMA Module front-end client library (`uibuilder.module.js`)

- Runtime

And this is what needs doing:

- Move new CSS and FE library
- Use new CSS in details pages
- New FE Library
  - Add `uibuilder.ui({...})` function that allows passing the same data as `msg._ui`
  - Add handling for `_ui.components[n].slots` where slots is an object of named slots with the special name of `default` for the default slot (default must be handled first since it overwrites all existing slots)

- New Endpoint: Return uibuilder version
- Check - make sure that new/renew connections create events
- Simplify Gulp processing for node html files
- Improve fe module version comparison (-dev vs -xxx)
- Add connected # check to uib-cache node so that the cache isn't sent if not a new load
- Create min version of css. Create min version of client module.js, add map files