Hi all, thought it was high-time I shared what is happening with UIBUILDER.
As some of you may be aware, I've suffered some eye problems this autumn so I've not been able to get as much done. But things are happening. Sadly, I'll probably not get a new release out before Christmas but at least I can share progress.
There are a couple of important new features to highlight:
-
When going into the Editor after a new version of UIBUILDER has been installed, we now have the option to show a highlight summary of changes.
-
There will be a new node, uib-markweb. This has a very simple configuration, just a folder (relative to the userDir) and a URL path.
The idea behind this is to be able to very simply create a file-based content management system, not dissimilar to Docsify which UIBUILDER's documentation currently uses. But, obviously, a fully Node-RED solution. (with help from UIBUILDER of course!)
The folder will need to contain any number of markdown files and sub-folders, all of which will be made available at the url and rendered from Markdown to HTML using the marked library (that Node-RED also uses).
There will be an option to have an HTML wrapper to make things look nice and that can, of course, have CSS styling.
Marked extensions will be allowed as well and will be automatically mounted.
Not in the initial release, but in the future, there will be features for automatic menus/navigation and dynamic data. Also for the future, I will make the libraries available to the uibuilder front-end so they can be used there as well as in Node-RED.
I've been meaning to work on something like this for a long time and I think a lot of people may find it useful even if they aren't using uibuilder itself. It should be great for documentation sites and even simple blogs or other news sites with minimal effort and no build-steps required.
Other updates already completed:
- Improvements to the performance of the
uib-cache node allowing much higher throughput.
- Some improvements to the documentation, with collapsible sidebar sections and some bug fixes.
- In the brand css, a new class
visually-hidden which is ideal for input labels that you don't need sighted people to see but you do need for screen-readers. Also a fix for the fieldset border.
- In the client library, I've added a high-resolution timing value to inbound messages to enable measuring of latency and performance.
- In the back-end code, there are some security improvements.
- In GitHub, I now have just 2 branches,
main is the release code and dev is the next development version. Both of those will continue to be around and so I won't be changing to new dev branches all the time. This should make it much easier for people who like to try out the upcoming features.
As always, the changelog and the "next" documents always have a lot more detail.
3 Likes
Progress!
The uib-markweb node now uses the same process as the main uibuilder node to create it's web instance. That also means that the uibuilder node and the back-end processes have all be updated to allow more flexibility when creating a new set of web routes. They are no longer restricted to static web serving, a node can provide its own handler or set of handlers and that is what uib-markweb does since it uses server-side rendering of markdown to HTML. Eventually, the uibuilder node should also get an input to allow you to specify any accessible server folder as its instance root folder.
The markdown can now also contain {{propertyname}} which will be replaced dynamically with attributes in the pages front matter and some additional attributes provided by the node.
The markdown is also now wrapped in an HTML page template, which can also use {{propertyname}} fields. It is a fixed template at present but that will change before release. Not only will the template be flexible but also I will provide the ability to add other attribute fields (static at least, possibly also dynamic).
Since the uibuilder instance processes are being used, generated pages will inherit the full power of uibuilder, both the front-end library and the real-time comms with Node-RED. This also means that you will be able to use uibuilder's custom web components such as <uib-var> to provide dynamically updating page elements as well.
So uib-markweb effectively becomes a Markdown-driven simpler version of uibuilder. 
Let me know in this thread if there are any specific Markdown extensions you want me to support. I will include these to start with (tick means already done):
- Front Matter.
- GFM (GitHub Flavoured Markdown), including, and checklists.
- GitHub style callouts (AKA "Alerts")
- Some form of code syntax highlighting.
- Mermaid for diagrams.
- Page table-of-contents
- Navigation sidebar (both auto-generated and manual), possibly a horizontal version as well.
Not sure if all of these will be in the first release though.
And now I have a basic search engine working. This creates a watcher in the source folder so that the index automatically updates in the background when content changes. Search is fairly basic but could be expanded with a more featureful search library later on.
And the socket.io realtime comms is also working. Inputs and outputs also working. Basically, the uib-markweb node is now very much a simplified version of the uibuilder node, sharing much of the code.
The big difference being that a uibuilder node is basically a multi-page app and to get a single-page app (SPA), you have to add and configure the uib-router library. Whereas the uib-markweb node creates a single-page app from the start, with a simplified router that doesn't need any configuration.
There are some limits with this approach, if you manually change the URL, a full page load is triggered. But with the gradual arrival of the new "Navigator" web API, those limits will disappear once Firefox get their act together and support it (Apple added support to Safari in December 2025, Chromium in 2022).
So I've now dealt with the two biggest potential issues with this approach. Next it will be head-down to do the tweaking which always takes time.
Everything is pushed to the GitHub "dev" branch though if you want to try things for yourself.
