Home

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

The uibuilder Documentation (also available within Node-RED) now contains the most up-to-date information on how to configure and use uibuilder. Some of the entries in the WIKI now take you there. The WIKI is now mostly used to allow people to record how-to entries for specific frameworks or to provide cookbook entries or links to interesting uibuilder-related articles/sites.

Don't forget to check the example flows included when you install uibuilder. They are available from Node-RED's import menu.

Update 2022-06-25:

If you are using VueJS, please take note that the Vue project decided to switch from v2 as the default to v3. This has caused considerable confusion and mayhem since most supporting projects were nowhere near ready for the change. Notably, bootstrap-vue which is in some of the uibuilder examples still only supports Vue v2 as does http-vue-loader (vue3-sfc-loader is an alternative for the latter).

My own preferences recently have been to move away from frameworks or at least to choose ones that use modern browser features and standards such as web components. I get too fed up of having to rewrite code every couple of years just because the framework has completely changed.

PLEASE CHECK WHETHER WIKI ARTICLES ARE STILL VALID FOR CURRENT VERSIONS OF THE FRAMEWORK AND FOR CURRENT UIBUILDER VERSIONS. Thanks. Also, please feel free to update old WIKI articles and bring them up-to-date.

Update 2022-01-19:

Refer to the Tech Docs (also available within Node-RED) for more information and help. Much of the general information in the WIKI (such as the To Do) is being moved to the tech docs and they are more likely to be up-to-date.

Please note that some of the WIKI content is rather out-of-date. 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.