# ✨ UIBUILDER feature release v6.6

**URL:** <https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [21 October 2023 15:38 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240 "2023-10-21T15:38:50Z")\
**Posts on this page:** 6\
**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:** [21 October 2023 15:38 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240/1 "2023-10-21T15:38:50Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/6/8690d750d4bd1733a33634bbf6d36cf80e2dbfce.jpeg)  
 ![UIB](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/b/4b222cd28b73f999e9c244876a057ecce33713c2.jpeg)

Something to brighten up those darker nights! A few nice new features along with the usual documentation updates and bug fixes.

### Highlights

- A new "Quick Start" example in the node-red import library. Simple flow to get going quickly.

- New node `uib-html` - hydrates low-code JSON (e.g. `msg._ui`) to full HTML in Node-RED just like the client library does in the browser. Lets you use UIBUILDER's low-code config style for things other than just UIBUILDER, for example http-in/-out and Dashboard. Note that the `ui.js` library is also available stand alone, you can use it in your own projects in and out of Node-RED.

- New node `uib-save` - saves a file to a uibuilder instance folder. For example, grab the latest HTML after dynamic updates using the `htmlSend` command and replace the existing `src/index.html` file (for efficiency). Or use the `uib-html` node to hydrate low-code JSON config into HTML and save to the index.html or a new file. Or perhaps use to save an image or data obtained from MQTT or a REST API.

- New custom HTML tag `<uib-var variable="myvar"></uib-var>` shows and dynamically updates a uibuilder managed variable. Use the uibuilder set command to create or update the variable. You can use the new `getManagedVarList` command to see all managed variables.

- New `uib-element` element type `markdown`. This is similar to the `html` type but takes markdown (CommonMark) as input. Requires loading the Markdown-IT library.

- A bunch of new client library functions (see details below) making hard things easy.

- Some simple branding changes. "uibuilder" is now "UIBUILDER" with colouring where feasible. The UIBUILDER icon is now a much lighter blue. There is also a new 3d logo kindly produced by forum member Marcus Davies.

- Lots of documentation updates and improvements.

* * *

More detail as always in the changelog.

Right, some videos now and then on with v6.7! Enjoy.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [21 October 2023 16:46 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240/2 "2023-10-21T16:46:54Z")

</div>

Hi Julian,

I don't use dashboard's in general, but I do hear great things with ~~uibuilder~~ UIBUILDER.

Very Nice!

---

<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:** [21 October 2023 16:50 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240/3 "2023-10-21T16:50:56Z")

</div>

Thanks Marcus. Though UIBUILDER isn't _just_ a dashboard. It can create dashboards for sure. But it is actually a data-driven web application builder.

Use it to create any kind of web app driven by data from Node-RED.

Dashboards are only one of the many things you can do with it. 😀

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [21 October 2023 16:54 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240/4 "2023-10-21T16:54:48Z")

</div>

I can't go into much detail - but I have a project to allow Part Suppliers to be able to see photos taken by engineers via some web interface of sorts (they are not attached to orders) that I need to build - so you never know 😄

---

<div class="post-metadata">

**Author:** ![Cyprien](https://avatars.discourse-cdn.com/v4/letter/c/a5b964/32.png) [@Cyprien](https://discourse.nodered.org/u/Cyprien)\
**Post date:** [24 October 2023 09:04 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240/5 "2023-10-24T09:04:01Z")

</div>

Very big release ! Thank you !  
Especially love the `<uib-var variable="myvar"></uib-var>` functionnality !!  
Do you have examples of use of `uib-html` et `uib-save` ??  
Thanks again 🙂

---

<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:** [24 October 2023 11:36 UTC](https://discourse.nodered.org/t/uibuilder-feature-release-v6-6/82240/6 "2023-10-24T11:36:21Z")

</div>

Thanks!

Still working up some examples and videos. I noticed an obvious improvement for uib-html as well so expect another update fairly quickly. That will let you merge with a provided page template or with the default uibuilder "blank" template page. Will be an option for max. flexibility.

Also some of the options in uib-save didn't get wired up so they need sorting as well. For example, there is a flag that should automatically tell connected clients to reload after a save but that isn't working yet.

For examples, uib-save can be really simple - this reads an mp4 video file from somewhere and saves it to the uibuilder node's serving folder so it is available in the front-end:

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

Or a bit more complex (this one grabs the current live page, adds some stuff and replaces the live page:

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

Though note that this example needs the updated uib-html node - otherwise the flow needs to be more complex.