node-red-contrib-uibuilder/docs/archived/CHANGELOG-v6.md

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.

---
typora-root-url: docs/images
created: 2017-04-18 16:53:00
updated: 2025-01-17 16:16:46
---

# Changelog archive for uibuilder v5

Current major version changelog can be found in the root of this package: `../CHANGELOG.md`.

----

## [v6.8.2](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v6.8.1...v6.8.2)

### `uibrouter` library

* **FIXED** Default route was always being set on load. Now correctly takes the current URL hash into account first.
* **FIXED** Routes loaded via script, if pre-selected on page load (e.g. in URL hash), were crashing. Now will automatically revert to the default route and just print an error to the console.
* **FIXED** On start, hash change event could be fired twice. Now does the initial route before setting up the hash change listener.

### `uib-save` node

* **FIXED** After import/paste, impossible to set a selected uibuilder node reference. Due to a timing issue in how Node-RED reports on nodes added to the flows on Editor page load. Now pre-populate the list of in-editor uibuilder nodes with deployed uibuilder nodes.
* **FIXED** Correctly change saved URL if a uibuilder node changes it. In this case, the save node knows the id of its linked uibuilder node but not the name so we change the name and mark the save node as needing re-deployment.
* **FIXED** In the Editor, the list of available uibuilder nodes to choose from was not sorted. Now sorted for ease of access.
* **FIXED** After a paste/import, when the url changes, reset the `addType` flag to stop chkUrl re-blanking it by adding `if (node.addType === 'paste/import') node.addType = 'load'` (in `oneditchange`)

### `ti-common.js` Editor support library

* **IMPROVED** Due to a timing issue in how Node-RED reports on nodes added to the flows on Editor page load, the in-editor list of uibuilder node was not built soon enough for use. Now pre-populates the list of in-editor uibuilder nodes with deployed uibuilder nodes. (Only if the in-editor list has zero entries).


## [v6.8.1](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v6.8.0...v6.8.1)

* **FIXED** Regression caused by "fix" for users deploying with an invalid URL. `uibuilder` node's editor and runtime code updated.
* **FIXED** Regression caused by over-optimising references to the TI event library which stopped msgs with an originator from getting back to the relavent `uib-sender` node. `libs/socket.js` updated.
* Version numbers bumped to match release.



## [v6.8.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v6.7.0...v6.8.0)

### 📌 Highlights

* The `<uib-var>` HTML component gets

  * **This is BIG!** - A `topic` attribute (use instead of the `variable` attribute) that automatically watches for messages from Node-RED matching the topic and outputs the payload onto the page. This becomes the _easiest_ way to automatically update the page! It is similar to mustache tags (`{{varname}}`) in frameworks but has the advantage that it is 100% vanilla standard HTML.

  * A `filter` attribute that can be used along-side `variable` or `topic` or on its own. The attribute receives the name of a function to run whenever the source data changes. Use for formatting output. A new function `uibuilder.formatNumber` has been added that is compatible, it outputs a formatted version of an input number according to the locale and number of decimal places specified. `<uib-var topic="mytopic" filter="uibuilder.formatNumber(2, 'de-DE')">[...]</uib-var>`. You can, of course, create your own filter functions.
  
  * Access to your `./index.css` style sheet file. This lets output be styled like the rest of your page.

* The `uibrouter` library gets some serious updates in this version. Including:

  * Automatic menu updates (to highlight the current route). Just make sure to use list items (li) for menu items and give them a `data-route="routerid"` attribute (where `routeid` is the actual route id). The `currentRoute` class & `aria-current="page"` attribute are both added to entries matching the current route.
  * Route definitions now support `title` & `description` properties.
  * New uibuilder variables to use with `<uib-var>` to show titles and descriptions that update automatically.
  * A fix for a missing default route - the first defined route is used in this case.
  * Other small bug fixes and improvements to the logic.

* The client library gets

  * Connected to a new "global" socket.io "room" allowing uibuilder connected pages to talk to each other. Note that this is still very basic, only the receiver is in place as yet. There is no function to do a global send.
  * New functions `joinRoom(room)`, `leaveRoom(room)`, `sendRoom(room, msg)` - to interact with arbitrary communication "rooms". Not fully working yet but will eventually allow any uibuilder connect node or client to communicate with 1 or many other connected nodes/clients.
  * A new `navigate` function and command. Triggers a page change or a route change either from front-end JavaScript or via a command message in Node-RED. Put a client into Kiosk mode and rotate pages or route displays all from Node-RED!
  * A new `scrollTo` function and command. Scrolls the visible page to a specific location either from front-end JavaScript or via a command message in Node-RED.
  * New UI functions `addClass(classNames, el)` and `removeClass(classNames, el)` to make class handling easier.
  * New `connect()` and `disconnect()` functions to manually connect/disconnect the Socket.IO connections.

* The importable example flows have been re-organised for easier access. Some new examples added: "Text Update - Different Methods", "FE Router Test"

* No-code and low-code features now all allow more flexible class handling (add, remove, and replace using lists). HTML element data outputs also now return an array of class names, not just a combined string.
* Front-end commands issued from Node-RED can now take a `quiet` option set to `true` to prevent the return message. e.g. `{"_uib": {"command":"navigate","prop":"#newroute","quiet":true}}`
* Front-end developers now have full access to the `ui.js` library via the `$ui` global.

### `uibuilder` node

* **FIXED** Previously, if an editor deployed a uibuilder node with an invalid URL, the node configuration & setup still happened which lead to odd results. Now a missing or invalid URL results in a logged error and the node is not configured. [ref](https://discourse.nodered.org/t/uibuilder-new-release-v6-7-new-front-end-router-improvements-to-uib-html-uib-save-and-more/83106/4)

### `uib-cache` node

* **FIXED** - bug introduced by last version's correction of `connections` count meant that "Only replay cache when client is really new" option resulted in the cache never being sent.
* Re-worked node's html into latest format with JS in separate resources file.

### `uib-html` node

* Downgrade `jsdom` version to 21.* as that is the last version that supports Node.js v14.

### `uib-save` node

* **FIXED** - usePageName logic.
* **FIXED** - import - initial deployment does not connect to node - need to clear the entry & mark as invalid. Also, no url = invalid
* URL (uibuilder instance) drop-down list is now sorted
* On copy/paste or import, link to uibuilder node is now cleared.

### `uib-tag` node

* **FIXED** - Allow blanks in some typed input fields.

### `uib-update` node

* **FIXED** - Allow blanks in some typed input fields.

### Client library

* **FIXES**

  * Some reported client data was incorrect. Notably the `connections`, and `lastNavType` properties. The `connections` property has now been corrected. The `lastNavType`, I now realise will never be correctly updated by the client and therefore it has been removed. Fixing these has also resulted in some simplification of the client code.

* **NEW** - `$ui` is a new global created by the library which gives full access to the `ui.js` library, that library presents an instance of the `Ui` class. So typing `$ui.version` in the browser dev console will return the current version of the ui library. Also available as `uibuilder.$ui` just in case `$ui` was already taken when the uibuilder library is loaded.

* **NEW** managed variable `globalMsg` - contains the last message received over the global socket. The global socket allows uibuilder connected pages to talk to each other.

* **NEW Functions that have Node-RED remote commands**

  * `navigate(url)` - Load a new web page or change routes. Can be triggered from Node-RED with msg `{"_uib": {"command":"navigate","prop":"#newroute"}}`. See [Client Functions (navigate) in the docs](client-docs/functions#navigate) for details. URL's can be full, relative (to the current page) or routing (hashes). Obviously, can be called in front-end JavaScript as well as `uibuilder.navigate('./page2.html')` etc.

  * `scrollTo(cssSelector)` - Scroll visible page to an element based on a CSS Selector. See [Client Functions (scrollTo) in the docs](client-docs/functions#scrollTo) for details. `top`, `start`, `bottom`, `end` can be used as shortcuts for the top/bottom of the page. An optional 2nd parameter gives more control.

* **NEW Functions (without Node-RED remote commands)**

  * `connect()`, `disconnect()` - These manually connect and disconnect the Socket.IO communications between the browser and Node-RED.

  * `formatNumber(value, decimalPlaces, intl, opts)` - Compatible with the `<uib-var>` component's `filter` attribute. Uses the JavaScript standard INTL library to allow locale-based formatting.
  
  * `keepHashFromUrl()` - Returns the route id from the URL.
  * `joinRoom(room)`, `leaveRoom(room)`, `sendRoom(room, msg)` - allows clients to join/leave/message any arbitrary room

* **NEW ui functions** - `addClass(classNames, el)`, `removeClass(classNames, el)` - see `ui.js` below for details.

* **NEW** - the client has some early code for dealing with Socket.IO "rooms". These are really a SIO server function but some methods updated to take them into account.
* **NEW** - the client now subscribes to a new "global" socket.io channel. This allows clients to talk to each other
* Added `quiet` property to remote command processing. Set `msg._uib.quiet` to `true` to stop the library returning a message to Node-RED on completion of the command.
* When using `uiGet` or `nodeGet` functions/commands, if class attribute is present, an additional `classes` property is returned which is an array of the class names.
* Moved  `$` and `$$` functions to `ui.js` library. This library references them. So no change to usage.

* **DEPRECATED Function** - `elementIsVisible` - Was not working correctly and a fix is complex. Will revisit in the future. Let me know if you need this function. This would normally be a breaking change but the function is still there - it returns a console msg and a node-red msg still - and as it wasn't working, I doubt anyone has used it.


### `uibrouter` library

* **FIXED** [Issue #232](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/232) - Ensure origin script is removed after re-applying to ensure only 1 instance shows instead of 2.
* **FIXED** - If no routerConfig.defaultRoute set, now uses the first (zeroth) defined route.
* Version bumped to v1.0.1
* **NEW** - Route definitions now support `title` & `description` properties.
* **NEW** uibuilder managed variables added to make it easier to use with `<uib-var>`. [`uibrouter_CurrentRoute`, `uibrouter_CurrentTitle`, `uibrouter_CurrentDescription`, `uibrouter_CurrentDetails`]. These are automatically updated whenever a route change occurs.
* **NEW** - `routeIds` variable is a JavaScript `Set` containing the list of unique route IDs.
* **NEW Functions** - `routeTitle`, `routeDescription` - return the current route's title and description properties if set or the ID if not.
* **NEW Function** - `currentRoute` - returns the current routes configuration object.
* **NEW Function** - `setCurrentMenuItems` - Updates any on-page elements matching the selector `li[data-route]` such that any having a data-route attribute matching the current route id have the `currentRoute` class & `aria-current="page"` attribute added. It is removed from all other matches. This makes it very easy to highlight the current route in any on-page menu's.

### `uib-var` custom web component

* **NEW**: Added `topic` attribute - auto-monitors for messages from Node-RED with the given topic. `msg.payload` contains the value to show. Applies filter if present. Just send a msg from Node-RED with the appropriate topic and the display will automatically update! (requires UIBUILDER)
* **NEW**: Added filter attribute. A filter is a JavaScript function accessible from `window` global or `uibuilder` contexts. The filter is applied to the variable value before display. Can now supply ONLY the `filter` attribute (without `variable` or `topic`). This allows arbitrarily complex processing.
* Auto load `./index.css` instead of `../uibuilder/uib-brand.min.css` - enables your own custom styling to be used. Not dependent on UIBUILDER, simply serve `index.css` from the same location as your main page.
* When using UIBUILDER, the resulting HTML output is sanitised if you have the DOMPurify library loaded. If the output is a JavaScript object, it will be highlighted using uibuilder's standard JSON highlighter.
* Improved error handling, especially for the `filter` attribute and its processing.

### `ui.js` low-code->HTML hydration library

* **NEW functions** - `addClass(classNames, el)`, `removeClass(classNames, el)` - Add/remove classes individually. `classNames` can be a single class name, or an array of class names. For `removeClass`, an empty string, null or undefined can be used to remove all classes (removes the class attribute).
* When using `uiGet` or `nodeGet` functions/commands, if class attribute is present, an additional `classes` property is returned which is an array of the class names.
* Improved separation between `payload` and `content` in "alert" and "notify" methods.

* Allowed low-code `attributes` property to be an array when specifying classes to apply. All classes in the array will be applied.
* Moved `$` and `$$` functions to this library from uibuilder.

### `uib-brand.css`

* `body` left/right margins are now set by a CSS var `--base-margin` so they can be adjusted more easily.
* Added new variable `--emoji-fonts`. Use as `font-family: var(--emoji-fonts);` for better emoji's. Used by custom bullets below.
* Added `li.check` (AKA `li.completed`), `li.uncheck` (AKA `li.unstarted`), and `li.started` classes which change list bullets to ✅, ❌, and ✔️ respectively.
* Added `ui.checklist` with `--base-margin` left/right margins and a little more space for the check bullets.
* Added basic nav menu formatting using `nav` tag. Including basic horizontal menu (`nav.horizontal` class) formatting. Assumes list embedded in a nav tag and that the list has correct aria roles set.

### Examples (import flows from Node-RED library)

* Re-organised & renamed examples now there are more of them.
* **NEW** - "Text Update - Different Methods" example
* **NEW** - "FE Router Test" example

### Documentation

* Heading levels 3+ have been made lighter to better differentiate them visually.
* The front-end client functions page now has an alphabetical list of functions.
* Improved low-code documentation for the `notify` and `alert` methods.
* Restructured config files for better future updates. Fixed some niggles.

### Other

* **FIXED** uibuilder's instance debug page was not working. Now fixed.
* The list of all uibuilder apps available at `/uibuilder/apps` is now sorted by URL. Don't forget that it also uses the description fields of each uibuilder node.
* More work done to move all filing system access into the single `libs/fs.js` library.
* Usual ongoing work to tidy, clarify and simplify code & eliminate any small issues.
* All nodes now have an Editor property `addType` which is set to 1 of 'load', 'new', or 'paste/import'. Allowing processing to differentiate between different circumstances that add nodes to the flow.

## [v6.7.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v6.6.0...v6.7.0)

### Highlights

* The new front-end routing library is available. Easy to use, robust and reasonably comprehensive. It is not dependent on uibuilder but offered with it to enable Single-Page Apps (SPA's) to be easily created with uibuilder.
* The `uib-html` node now allows an HTML string wrapper. This defaults to uibuilder's default "Blank" template HTML or can be overridden using `msg.template`. This lets you create a fully working page from no-code and low-code configurations that can be fed direct to `uib-save` or used in Dashboard or with http-in/-out nodes. Or indeed with external web server tools.
* A new method of easily getting dynamic updates onto the web page has been added, the `<uib-var>` tag.

### New client library - uibrouter - front-end routing library

A complete, standalone library for doing front-end routing with both internal and external templates. Lightweight and simple to use. See the [documentation](docs/client-docs/fe-router.md) for details.

### New client custom web component `<uib-var>`

The `<uib-var>` tag provides an easy way to get dynamically updated content into your web page. See the examples library and the documentation for more details. In this release, allows the specifying of a managed uibuilder variable which will be inserted into the page and automatically updated whenever the variable updates. This is similar to mustache tags in many front-end frameworks (`{{myvar}}`) but, unlike those frameworks, is totally vanilla, standards-based. Expect further improvements in future releases.

### `uib-html` improvements

* The `uib-html` node now accepts a `msg.template` property which, if provided, MUST contain a valid HTML page template.

  This allows you to grab an existing page using the `htmlSend` command, add new elements/updates and save it back to a uibuilder instance either as the default page or another page, for example, using the `uib-save` node. Overwriting a page is a way of ensuring that new accesses get a known page with structure and potentially data.

  You can, of course, use this node to produce HTML for use outside of UIBUILDER. For example, use uib-element/uib-update, add a template and use this node to create a complete web page for use with http-in/-out, a static website or some other web service.

  You probably don't need/want the template if outputting for the Node-RED Dashboard `ui_template` node.

### `uib-save` improvements

* The reload client flag now actually works.
* The new "Use pageName" flag allows you to save to the uibuilder node's live folder using the page name returned from the front-end or manually set in `msg._ui.pageName` or `msg.uib.pageName`. This makes it easier to save an updated page via the `htmlSend` command (either from Node-RED or from front-end code). See the example flow to see how this works. It means that you don't need to know the folder or the pageName at all.
* The filename can include folders (use `/` as separator) and missing folders will be created automatically if the "Create Folder" flag is set. Note that you cannot have any `..` in the filename, this is to prevent escaping from the instance root folder and causing mayhem elsewhere. By default, new folders cannot be created (this is a safety feature), select the "Create Folder?" flag to allow creation.
* The Editor js has been moved out of the html file and put into `resources/uib-save.js`. It is loaded by the html file in a link. This makes development a lot easier. The code also references `resources/ti-common.js` to ensure consistency.

### `uib-tag` improvements

* **FIXED** - Tag name input would only accept string. Now correctly processes other types.

### Client library improvements

* **FIXED** Client `htmlSend`, when called as a Node-RED command, was returning 2 messages. Now returns the HTML string and sends it to Node-RED directly only if the new 2nd argument is TRUE (the default so that direct calls will still work without changes).
* **FIXED** `eventSend` when attached to a change event returns the `value` property that all `input` tags have - except when they don't! When input is used as a checkbox, it has a `checked` property instead. Function changed to return the checked value if it exists (`true` or `false`), the value property otherwise.
* **NEW function and command** `watchUrlHash` - Toggle (or manually set on/off) sending URL Hash changes back to Node-RED in a standard msg.
* **NEW watched variable** `urlHash` Set on load and updated as it changes. URL Hashes are used by front-end routing for Single-Page-Apps (SPA's). They do not reload the page.
* **New utility function** `truthy` Takes a truthy/falsy input (e.g. text, number, boolean) and returns true or false (boolean). If input is neither truthy or falsy, can take a 2nd parameter which is the default return.
* Function added to watch for url hash changes.

### `uibuilder` node improvements

* `uibuilder` - Reduce code complexity by moving more fs actions out into `libs/fs.js`.
* Some common Node-RED Editor code and styles moved to common libraries (`resources/ti-common.js` & `resources/ti-common.css`) loaded as resources. Making the editor code smaller and more consistent.

#### Editor panel improvements

* Major rework of tracking node instances. Custom events are now fired: 'uibuilder/node-added', 'uibuilder/node-changed', 'uibuilder/node-deleted'. With the node in question passed as data in the event. For added nodes, an extra property `addType` is added to the node object and set to either "load" (fired when the Editor is loaded which adds all nodes), "new" (when a brand new instance is added, eg from the palette), or "paste/import". The tracking code is also now only ever instanciated once when the Editor is loaded.
* Better and more consistent removal of URL setting when pasting or importing existing uibuilder nodes.
* The Editor js has been moved out of the html file and put into `resources/uibuilder.js`. It is loaded by the html file in a link. This makes development a lot easier. The code also references `resources/ti-common.js` to ensure consistency.
* Improved debug information. Debug output to Editor page console is automatic if environment variable NODE_ENV is set to 'dev' or 'development' (it used to be if running on localhost). Otherwise can be turned on by manually issueing `uibuilder.debug = true` on the browser console on the Editor page.

### Examples

* `uib-save` and `uib-html` example flows added.
* `uib-var-web-component` example flow added. Contains several examples of showing uibuilder managed variables dynamically in your HTML code. Including several no-code examples.
* `uib-tag` example flow added.

### Other improvements

* **NEW node Library** `libs/lowcode.js` - The beginnings of moving the zero- to low-code element translations (e.g. uib-element, uib-update and uib-tag) to their own library. With the possibility of eventually making that library available as a stand-alone front-end library as well. Not yet in use.
* `libs/fs.js` - More replacements towards removing dependency on fs-extra. More move of filing system actions out of other nodes and libraries.
* **NEW utility function** `getSource(propName, node, msg, RED, src, srcType)` in `libs/uiblib.js` - this is an ASYNC function that returns a promise. It is a standardised way of getting the current value from a Node-RED Typed Input field.
* Enhanced tooltips not applied to the Monaco/Ace edit panel.




## [v6.6.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v6.5.0...v6.6.0)

### 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 using the `htmlSend` command and replace the existing `src/index.html` file after dynamic updates. 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.

### **NEW NODE** - `uib-html` - Hydrates `msg._ui` configurations into HTML

Takes a `msg._ui` input such as those produced by the uibuilder zero-code nodes (`uib-element`, `uib-tag`, `uib-update`) and "hydrates" that config UI description into HTML.

Uses the same code as the client library. Outputs HTML on `msg.payload`, removes the input `msg._ui`.
<!-- Optionally, can add one of the uibuilder templates as a wrapper to the input payload HTML or wrap in a non-uibuilder template -->

#### Current Limitations

* Uses the widely used [`jsdom` library](https://www.npmjs.com/package/jsdom) to do all the heavy lifting. This library is used by many existing tools and implements virtually all of the DOM v4 spec. However, there will always be a few things that can't be done in a virtual DOM outside the browser. Check the JSDOM library documentation and WIKI for any current limitations.
* Some things such as the dynamic client commands (reload, toggle visible msgs, ... ) don't make sense in this context. They will either produce an error or will be ignored. Occasionally, they might produce some unexpected output.
* Testing is currently very limited. Please report any errors.

#### Why?

- Learn how to write your own HTML
- Output to a uibuilder node to save processing the _ui data in the front-end
- Output to a uibuilder server folder for use in your app as a static load (or occasionally changing load)
- Output to a file for use in an external (to Node-RED) static web server/service
- Output to an `http-out` node as a response to a request
- Output to a `ui_template` node for incorporation in Dashboard UI's

### **NEW NODE** `uib-save` - Save a file to a UIBUILDER instance folder

Makes it easy to output files to the folder structure of a uibuilder node.

This can be used for all manner of things.

* Use with the `uib-html` node to make a permanent copy of some zero-/low-code output.
* Use with the `htmlSend()` front-end function (`htmlSend` `_uib` cmd from Node-RED) to get a copy of the current state of the UI and save it back to the page file for future use.
* Use with HTML like `<input type="file" onchange="upload(this.files)" multiple />` to get one or more files from the user (e.g. images or anything else to save) and save the file.

Obviously, this means that all input must be carefully checked for safety.

Why might you use this node?

- Save `msg._ui` configuration data to a static JSON which can then be used to load an entire UI on page load.
- Save/update files that are automatically available via the uibuilder web. For example a static web page that is perhaps updated periodically. This could also work with data, JavaScript, CSS, etc. In fact anything that can be serialised or that is already a string.
- Use with the `uib-html` node to save static HTML files built via `uib-element` or some other flow that outputs `msg._ui` configurations.

### Improvements to the client library

- **NEW Feature** A new built-in web component `uib-var`, used as `<uib-var variable="uibVarName"></uib-var>`.
  
  Displays the value of the given variable name in your web page and dynamically updates as long as it is changed using `uibuilder.set()`. (or from Node-RED using the appropriate uib set command). The tag inserts the variable value as inline text. Class and Style attributes can be added as for any other HTML.

  Two other attributes are available on the component tag:
  
  - `undefined`: If present or set to `on`, or `true`, the component will show even if the variable is undefined. If not present or set to anything else, an undefined variable will be blank.
  - `report` If present or set to `on`, or `true`, the component will return a standard message back to Node-RED when the variable changes value.

  This works with Markdown as well and even works if DOMPurify is loaded as overrides to its filters are provided.

  There is no need to load the component, that is done automatically in the uibuilder client library.

  Examples: `<p>UIBUILDER client library version "<uib-var variable="version"></uib-var>"</p>` or `<p>Last msg received: "<uib-var variable="msg"></uib-var>"</p>`

* **NEW Function** `uibuilder.copyToClipboard(uibVarName)` - passed a UIBUILDER variable, will copy the contents to the clipboard (stringifying it first). Can't be used from the browser dev console due to restrictions in the browser. Use as `onclick` function on buttons. Similarly, cannot be called as a remote command.
* **NEW Function** `uibuilder.elementIsVisible(cssSelector, stop = false, threshold = 0.1)` - Sends a msg back to Node-RED when the selected element goes in and out of visibility within the browser. Sadly, browser restrictions prevent this from being called as a remote command.
* **NEW Function** `uibuilder.elementExists(cssSelector, msg = true)` - Returns `true` if the selected element exists on the page, false otherwise. Sends a msg back to Node-RED unless suppressed. Also available as a remote command.
* **NEW Function** `uibuilder.convertMarkdown(mdText)` - Returns an HTML string converted from the Markdown input text. Only if the Markdown-IT library is loaded, otherwise returns the input.
* **NEW Function** `uibuilder.sanitiseHTML(htmlText)` - Returns a safe, sanitised HTML string IF the DOMPurify library is loaded. Otherwise returns the input.
* **NEW Function** `uibuilder.getManagedVarList()` - Returns an object listing all managed variables.
  
  These are variables that have been set using `uibuilder.set()` or the equivalent command from Node-RED (or internally by the client library) and that can therefore be watched for changes using `uibuilder.onChange()`.

  Can be called from Node-RED as a command as well.

* **NEW Function** `uibuilder.getWatchedVars()` - Returns an array of watched client variables.

  These are variables that have been set using `uibuilder.set()` or the equivalent command from Node-RED (or internally by the client library) and that have an active `uibuilder.onChange()`.

  Can be called from Node-RED as a command as well.

* **NEW** "Maskable" icons added and available in the front end at the URL `./images/maskable_icon_x512.png` where `xNNN` is one of `x48`, `x72`, `x96`, `x128`, `x192`, `x384`, `x512`. (`front-end/images` folder). These are useful for PWA apps.
* **NEW** Template manifest file available at URL `./utils/manifest-template.json` (`front-end/utils` folder). Copy, amend and load this if you wish to make a PWA from your UIBUILDER instance.
* **NEW Variable** `uibuilder.get('url')` - The instance url fragment (name) for the uibuilder instance.

* **UPDATED** `uibuilder.set('varname', value)` - Now has 2 additional optional arguments
  
  `store` (boolean): Tells uibuilder to attempt to save the variable/value in the browser `localStorage`.
  `autoload` (boolean): Tells uibuilder to attempt to restore the last stored value from browser `localStorage` when loading the page.

* **UPDATED** `uibuilder.setStore('varname', value)` - Now has an extra optional argument 

  `autoload` (boolean): Tells uibuilder to attempt to restore the last stored value from browser `localStorage` when loading the page.

* All UIBUILDER icons and images changed to the new, lighter blue background.
* Added close and copy (to clipboard) buttons on the Visible Messages box. They are only visible when hovering over the box.
* Stand-alone versions of the low-code ui features - the code that turns the low-code config JSON into HTML and manages DOM interactions - are now available. This code is already built in to the UIBUILDER client library but now may be used independently in your own projects. Auto-generated by `gulp watch` when the source is changed. Source is in `src/front-end-module/ui.js`, dist versions are in the `front-end/` folder.
* Added extra error handling to the syntaxHighlight function to prevent rare error.

### Improvements to the `uib-element` node

* **NEW Element Type** **Markdown** - Much the same as the HTML element but uses Markdown as input instead of raw HTML. Requires the Markdown-IT library to be loaded in the client.

### Improvements to `ui.js` library

NB: This is the library that reconstitutes uibuilder's zero- and low-code configuration JSON data into a full HTML UI. It is built into uibuilder's front-end client library but is now also available stand-alone for your own projects and is also available as a node.js class module that works with `jsdom` on the server. Eventually, it will be in a stand-alone npm package for use in other projects.

* ESM and IIFE minimised versions of the stand-alone client are now available in the `front-end` folder. These can be used in other projects. Map files for easier debugging also available.
* Now fully self-contained, no longer has external vars. This allows it to be made available as a node.js library as well.
* `window` is now an argument you must pass in when constructing an instance of the class. This allows it to be used in node.js (in conjunction with the `jsdom` library) as well as the browser. References to `window`, `document`, `log` and `syntaxHighlight` are now fully self-contained. See `nodes/uib-html.js` for an example of using with `jsdom`.

* **NEW Function** `convertMarkdown(mdText)` - Returns an HTML string converted from the Markdown input text. Only if the Markdown-IT library is loaded, otherwise returns the input. Allows the use of Markdown-IT independently from the `_ui` low-code processing.
* **NEW Function** `sanitiseHTML(htmlText)` - Returns a safe, sanitised HTML string IF the DOMPurify library is loaded. Otherwise returns the input. Allows the use of DOMPurify to sanitise HTML independently from the `_ui` low-code processing.

### Improvements to the UIBUILDER node

* On loading a template, if the "Reload connected clients on save?" flag is set on the Files tab, a reload command is issued to all connected clients.
* For the `uibindex` detailed information web page and the instance information page, replaced the old `uib-styles.css` with the newer `uib-brand.css`.
* Emoji's added to error (🛑) and warn (⚠️) log outputs. 📘 emoji added to the uibuilder initialised message to make it easier to spot in a busy Node-RED log.
* Updated branding.

### Improvements to the server libraries

#### New `nodes/libs/fs.js` library added

This will eventually hold ALL file system processing so that it is all together. That will allow it to be improved in a single place. Eventually will allow the deprecation of the fs-extra package.

It is another singleton class instance. It is initialised in the main uibuilder runtime and initially just accessed in the new `uib-save` node where it does the file saving.

#### admin-api-v3

* Initial code for isPackageInstalled API for the Editor

#### package-mgt

* isPackageInstalled function - returns true or false

### Improvements for uib-brand.css

* New classes to support the enhanced showMsgs command buttons features.

### Documentation improvements

* **NEW** The docs now have a fancy landing page! Let me know if you have ideas on how it can be improved. 😊
* **NEW** `apis` folder - currently only contains the index readme which lists all of the REST API's provided by uibuilder.
* **NEW** `dev/client-libs` and `dev/server-libs` folders - providing a developer focused summary of all of the uibuilder library files/classes.
* **NEW** A custom "Not Found" (404) page added. Much more friendly than the previous browser default.
* **NEW** Added a `docksify-howto` page to the docs. This is not currently linked and so only available in source unless you know the name. Explains how to use Docksify with the UIBUILDER docs.
* Changed the uibuilder logo to a lighter colour to fit in with the docs. Added red highlight to `ui`, thanks to Paul-Reed for the idea.
* Added extended information links to main readme and the docs home page.
* Added available command summary to the "Control from Node-RED" client docs.

### General Improvements

* New branding. 'uibuilder' is now 'UIBUILDER' except when referring to code. Where feasible, UIBUILDER has the new light blue as the text colour except for the initial UI which is a slight variation of the Node-RED base colour.
* A CITATION.cff file has been added - this provides official meta-data to the repo for use in research and standardised citation references.
* Some pages of documentation reorganised. Note that this may have broken some links, if so, please do report them. The "Page Not Found" page has been updated with a reporting link.
* **NEW EXAMPLE** `quick-start` - A simple, pre-configured flow with some standard uibuilder inputs and outputs.
* Remove dependencies on `fs-extra` library - `nodes/libs/web.js` only right now - need to wait for node.js v16.7 to be baseline for the rest (allowing uibuilder to move to be a monorepo and use dependant packages).
* **NEW LIBRARY** `nodes/libs/fs.js` - Server file handling library. Using the node.js core `fs/promises` library dependency only, not `fs-extra`. Initial release only contains `writeInstanceFile`, an async function to save a file to a uibuilder node instance's folder structure (used by the new `uib-save` node). Aim is to use for all server file/folder handling eventually, helping facilitate the previous improvement.
* The `ui.js` library now added as a node.js library to `libs/ui.js` so that it can be used with the `uib-html` node. Auto-generated by `gulp watch` when the source is changed.
* Improved GitHub issue templates, workflows & funding. Added CITATION.cff.



## [v6.5.0](https://github.com/TotallyInformation/node-red-contrib-uibuilder/compare/v6.5.0...v6.4.1)

Apologies, the documentation has fallen a little behind with this release as things took longer and more new features were added than expected. But I needed to get this release out as it contains some important bug fixes as well.

### **NEW** Features

* New zero-code node `uib-tag` - creates a single html element based on the given tag name (e.g. create a link element from an `a` tag). Also works with web component custom tags. Use this when you want to add something not covered by `uib-element`. Lets you specify slot content (html or Markdown) and attributes at the same time.

* The client library now **filters inbound messages** according to `pageName`, `clientId`, and/or `tabId` set in either `msg._uib` or `msg._ui`.
  
* There is **a new, dynamic page** at `../uibuilder/apps` that lists (with links) all uibuilder instance endpoints. Currently only a very simple list but the plan is to add an instance title and description field to uibuilder which would then be populated into this page. Use as an index of all of your main web pages (strictly, this is a list of all of the uibuilder-driven web apps. Apps may have multiple pages of course).

* The uibuilder client connection control msg now **reports the URL parameters** (AKA search parameters) for the connection from the client. This is another way of passing data from a client to the server. Obviously, you should _never_ trust user input - always limit, check and validate user input.

* `uib-element` now allows the core data for the element to be defined in the node or on a context variable and other locations, you are **no longer forced to use `msg.payload`**. It also now allows the incoming `msg.payload` to be sent to the client to allow for local processing if required.

* uibuilder Instance routes/middleware

  You can now **add ExpressJS routes and other middleware to a _single instance_** of uibuilder (a specific uibuilder node), not just to all nodes. Especially useful if you want to add custom security (login, registration, etc) to just one instance.

  The new feature lets you specify the sub-url-path, the HTTP method and the callback function. Paths can include wildcards and parameters too. The routes are always added to the instance router which forces them to only ever be sub-url-paths of the specified instance. e.g. if your instance url is `test`, a route with a path of `/foo/:bah` will ALWAYS be `.../test/foo/...`. This is for security. Note that you are responsible for creating unique URL paths, no checking is done and ExpressJS is quite happy to have multiple path handlers but if you provide a terminating response (e.g. `res.status(200)`) and no `next()` call, the call stack is obviously terminated. If you include a call to `next()`, overlapping route callbacks will also be triggered. In that case, make sure you do not do any more `res.xxxx()` responses otherwise you will get an `ERR_HTTP_HEADERS_SENT` error.

  To add route handlers, create 1 or more .js files in the `<instanceRoot>/routes/` folder. See the docs for details.

  What can I do? Authentication, authorisation, http headers, dynamic html changes/additions, js inserts, logging, server-side includes, server-side rendering (e.g. Jade, ...) ...

### NEW NODE: uib-tag

* New zero-code node
* Creates a single html element based on the given tag name (e.g. create a link element from an `a` tag). 
* Works with web component custom tags.
* Lets you specify slot content (html or Markdown) and attributes at the same time.
* Filters out `msg._ui` from input if it includes `msg._ui.from` set to "client". We don't want to loop from output to input. [ref](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/16)

Use this when you want to add something not covered by `uib-element`.

### Changes to uibuilder client Library

* **FIX** Change warn msg "[Ui:_uiManager] No method defined for msg._ui[0]. Ignoring" to an error so it is more visible.
* **FIX** [Issue #213](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/213) - SVG flow example not working `_uiComposeComponent is not a function at htmlClone index.js:52:15`
  
  Caused by the move of all ui fns to a separate class. So `_uiComposeComponent` is no longer accessible. It should not have been used in the example anyway since anything starting with an underscore should be for internal use only. My bad.

  `uibuilder.uiEnhanceElement(el, component)`` added. Example will be updated again once this is released

* **NEW FUNCTION** `uibuilder.notify(config)` - If possible (not all browsers yet fully support it), use the [browser Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API/Using_the_Notifications_API) to show an *operating system notification*. Supports a simple click reponse which can be used with `uibuilder.eventSend` to notify Node-RED that a user clicked the notification. Note that there are significant inconsistencies in how/whether this API is handled by browsers. It may not always work.

* No longer processes input messages if either `msg._uib` or `msg._ui` includes either `pageName`, `clientId`, and/or `tabId` and where those parameters do not match the current page or client.
* Improvements and corrections to the `eventSend` function. Allowing more event types to be sensible handled (including the Notify response). Also added CSS class information & specific outputs for notifications. Also, added input field types to form outputs.
* Added `window.uib` as a synonym of `window.uibuilder`. So you can do things like `uib.logLevel = 5` instead of `uibuilder.logLevel = 5`
* Added flag to indicate if the *DOMPurify* library is loaded. Added warnings to the `include()` function when it is loaded since some includes will be filtered by the purify process for safety. Updated the front-end client introduction document with details about DOMPurify, how to load it and use it.
* Added flag to indicate if the *Markdown-IT* library is loaded. Updated the front-end client introduction document with details about how to load the library and use it.
* Trigger onChange when `msg.payload` received along with `msg._ui`. Previous update turned this off completely but that is too restrictive. Use the Passthrough option in `uib-element` for example so that data can be further processed in the front-end if required.
* When the client sends a msg back to Node-RED that includes `msg._ui` properties, the client adds `msg._ui.from` set to "client". This lets the `uib-element`, `uib-update`, and `uib-tag` nodes filter them out when flow editors have looped an output msg back to the input. [ref](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/16)

### Changes to uibuilder main node

* **NEW** Instance route/middleware handlers - allows you to create custom url routes and custom middleware functions that only impact routes for a single instance of uibuilder.

* **NEW** Deep object find function added as `RED.util.uib.deepObjFind` so that it can be used in function nodes. Useful for manipulating `msg._ui` objects which can get very deep. See [Manipulating `msg._ui`](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/client-docs/config-driven-ui#manipulating-msg_ui) for details.

* **NEW** A dynamically generated list of all uibuilder apps is now available at `../uibuilder/apps`. In addition, title and description fields have been added to the Advanced tab in the uibuilder node. These are used on the apps page. You can also output the detailed list in Node-RED using a function node with `RED.util.uib.listAllApps()`. The detailed list also shows what node defines the app.

* Filter out `msg._ui` from input if it includes `msg._ui.from` set to "client". We don't want to loop from output to input. [ref](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/16)

### Changes to uib-element node

* **FIX** Was issuing a `node.warn` showing the input type (happening on v6.1 as well) - only for table type. Now removed.
* **FIX** Chaining to a page title deleted the previous chain - putting title first was ok. Now works either way.
* **FIX** Form checkbox "value" output from auto-send was always "on". Because HTML is sometimes utterly stupid! Input tags of type "checkbox" do not set a value like other inputs! They only set the "checked" attribute. Fixed by forcing the value attribute to be set. [Issue #221](https://github.com/TotallyInformation/node-red-contrib-uibuilder/issues/221), [Discussion #219](https://github.com/TotallyInformation/node-red-contrib-uibuilder/discussions/219).

* **KEY CHANGE** Added option to select core data input other than msg.payload.
  
  This means that you can define the UI element directly in the node if you want. This includes the use of JSONata for dynamically defined elements, allowing for even simpler msg inputs should this be desired.

* **KEY CHANGE** Added an option to pass through msg.payload. When sent to the front-end, the client library will trigger standard events to allow further processing of the data in the front-end. 
  
  This means that you can use `uibuilder.onChange` etc in the front-end even though the msg contains `msg._ui` which would normally prevent this from happening.

* Order of node properties changed in the Editor. Hopefully more logical.
* Filter out `msg._ui` from input if it includes `msg._ui.from` set to "client". We don't want to loop from output to input. [ref](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/16)

* Form additions:
  * Textarea input.
  * Select options drop-down input. 

### Changes to the uib-update node

* Filter out `msg._ui` from input if it includes `msg._ui.from` set to "client". We don't want to loop from output to input. [ref](https://discourse.nodered.org/t/uibuilder-table-implementation-2-0/80618/16)

### Changes to CSS styles (uib-brand.css)

* **NEW** Minified version included, use as `@import url("../uibuilder/uib-brand.min.css");`
* Reduced thickness of error border on form input fields.
* Switched form layout from Float to Flex. Added breakpoint at width=600px where layout becomes vertical instead of horizontal.
* CSS Variables
  * **NEW** `--mode` - "light" or "dark" according to the current browser preference or html class override.
  * **NEW** `--text-hue` and `--surface-hue` allows independent colour control of standard text and backgrounds. Defaults to `--brand-hue`.
  * **NEW** `--complementary-offset` - defaults to 180, you are unlikely to want to change this.
  * **NEW** `--font-style` - set to `sans-serif` by default.
* CSS Classes
  * **NEW** `.flex-wrap` - auto-wrapping flex layout.
  * **NEW** `.grid-fit` - auto-columns with number set by `--grid-fit-min`.
  * **NEW** `.compact` - removes margin and reduces top/bottom padding to a minimum (0.2rem).
  * **NEW** `button.compact` - R