Home

Warning

PLEASE CHECK WHETHER WIKI ARTICLES ARE STILL VALID FOR CURRENT VERSIONS OF UIBUILDER AND ANY FRONT-END FRAMEWORKS REFERENCED. Thanks.

Also, please feel free to update old WIKI articles and bring them 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 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.

Note

Rest assured that uibuilder is still very much in active development. Do check to see if there is a development branch in the code here on GitHub (they will be labelled with the next version, e.g. v7.7.7) because that is the branch that will be used for the next release. Sometimes I will also publish a vNext release to npm as well and that version can be treated as a pre-release version for late beta testing.

Tip

Refer to the UIBUILDER Documentation (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 docs and they are more likely to be up-to-date. 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.

The Node-RED Forum is the best place to have a discussion and get help about UIBUILDER.

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

Note

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.

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.