Home

Confused? Don't worry, that is my poor writing style not you!

Update 2022-01-19: Please note that some of the WIKI content is rather out-of-date. I will do my best to try and update - particularly the forward view parts. Some of the examples don't get updated unless someone shouts or provides an update (which anyone can do). Also don't forget that the tech docs have been greatly expanded in the last year or so. The live version of them is available here on GitHub pages - that may not reflect the version of uibuilder you have installed though. The version that matches your installation is available from within Node-RED. My intent is to move anything in the WIKI that relates specifically to the configuration of uibuilder and using it in flows into the tech docs. Examples of use with different frameworks will stay here on the WIKI. Though some examples may be turned into external templates now that you can use an accessible Git repository as a template.

Rest assured that uibuilder is still very much in active development. Do check to see if there is a vNext branch in the code here on GitHub because that is the branch that is mostly used for the next major release if it is in a reasonably usable state. Sometimes I will also publish a vNext release to npm as well and that version can be treated as a pre-release version for beta testing.

Why uibuilder?

This library makes it very easy to create any number of different web applications from Node-RED.

UIBuilder is designed to complement Node-RED's own "Dashboard". Dashboard is very easy to start building a web interface but you may eventually discover the limitations that come from it being a complex wrapper around the front-end library "Angular". You can only create a single web application in Dashboard. Although it lets you create multiple "pages", these are all loaded whenever you access any of them and this can be slow and memory intensive.

UIBuilder doesn't have the nice friendly components that Dashboard has but it is much lighter in weight and complexity and is a lot more flexible.

uibuilder endeavours to minimise the amount of boilerplate coding you have to do. But it still lets you work with your familiar web design tools while giving you access to the power and simplicity of Node-RED as your back-end server.

How?

Each application is coded by you (or a friendly coder) using standard tools. The HTML, CSS and JavaScript for the application resides in the home folder of the device running Node-RED (typically ~/.node-red).

Each of those applications can use any front-end (e.g. client/browser) design and code you like and you can easily add front-end libraries. Or, for simple things, just use the provided JQuery library to dynamically display information passed from Node-RED.

Each application is given a communications "socket" that lets you very easily send and receive information between the Node-RED server and the application client (in the browser). It uses the same message format that you use in Node-RED itself. In the front-end, the uibuilder library gives you the ability to track when a new msg is received so you (or your chosen front-end library) can do something with it.

Getting Started

See the Getting Started page in this WIKI.

More Help?

There are a set of technical documents included in the code. You can also access these from the uibuilder help panel or a uibuilder node instance in the Editor.