Earlier this evening (UK), I pushed the first release of the new zero-code uib-update
node to the v6.1.0 branch on GitHub. It allows you to easily update an element on your web page from data in Node-RED.
It is workable but very basic right now. It should show how it will work and its flexibility. Very simply, you just need to know how to select an HTML element on your web page (hint: you can use your browser's dev tools to find and copy the CSS Selectors that you will need).
In this version, you can just update the inner HTML of the selected element (referred to as the "slot").
Before release, you will be able to use Markdown not just text or HTML in the slot, update attributes (e.g. input values, classes, styles, etc), change event handlers, and update element properties (e.g. attaching non-string objects to the element, working with more advanced features in HTML components, etc).
As you can see, you will be able to make use of lots of Node-RED's features to select and update dynamically.
For now, if you try it out, have a go at updating an HTML heading content or the content of an on-page div or input value. Combining a msg payload with JSONata is a nice easy way to do things like convert input data to a different format.
This node outputs uibuilder's standard configuration data just as uib-element
does and both nodes can be chained to build up more complex pages, updates and changes dynamically with zero code.
Currently, the uibuilder client library "hydrates" the low-code config data into standard HTML. In a future release, you will be able to do that within Node-RED as well.