Home

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

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