Home

Awesome

Discussion Static Badge NPM Version NPM Total Downloads NPM Downloads per month GitHub last commit GitHub stars GitHub watchers GitHub license Min Node Version Package Quality DeepScan grade CodeQL Open Issues Closed Issues

<img class="dhide" align="right" style="width:124px;" src="front-end/images/node-blue.svg" title="uibuilder icon" />

node-red-contrib-uibuilder

UIBUILDER for Node-RED allows the easy creation of data-driven front-end web applications.

It includes many helper features that can reduce or eliminate the need to write code for building data-driven web applications and user interfaces integrated with Node-RED.

[!NOTE] UIBUILDER triggers a quality warning in the Flows scorecard entry.

"Number of Dependencies" is >6 - this is due to the large number of features in UIBUILDER and is expected. Even so, v7 only has 7 dependencies. 1 more is due to be removed in a future release.

Installation

UIBUILDER is best installed using Node-RED's Palette Manager.

<details><summary>Manual installs and other versions</summary>

To install manually, from a command line on your Node-RED server:

cd ~/.node-red
npm install node-red-contrib-uibuilder

To install old versions, provide the major version number:

cd ~/.node-red
npm install node-red-contrib-uibuilder@v5

To install development branches, please install from GitHub. Branchnames are future version numbers, check GitHub for available branches:

cd ~/.node-red
npm install totallyinformation/node-red-contrib-uibuilder#v7.1.0

You will need to restart Node-RED if installing manually.

</details>

Updates

The current CHANGELOG contains all of the changes and requirement details for each version.

Older changes can be found in the previous change documents: CHANGELOG-V5, CHANGELOG-V5, CHANGELOG-V3/V4, CHANGELOG-v2, and CHANGELOG-v2.

Getting started

Once installed, The following is a typical simple flow to get going.

  1. Add a uibuilder node. Open its settings and give it a "URL" which is used as the identifying name. Close the settings and click on the Deploy button.
  2. Re-open the uibuilder node's settings and click the "Open" button to see the resulting web page.

You are now ready to edit the front-end html/javascript/css if you wish and to add logic in Node-RED to provide inputs and handle outputs. You can also use UIBUILDER's no-code features to create your UI as well or instead.

Please see the First-timers walkthrough in the documentation and the Introduction Video for more help to get started. Also try out the built-in example flows.

Examples

Within Node-RED, use the hamburger menu. Click Import. Click Examples. Select the node-red-contrib-uibuilder folder and choose an example.

The templates feature in UIBUILDER provides working front-end code of various configurations.

Other examples can be found on the Node-RED Flows site and the UIBUILDER WIKI. Also see the FAQ's and answered questions on the Node-RED Forum.

Documentation and other links

Please refer to the Documentation web site. This can also be accessed from within UIBUILDER nodes even without an Internet connection.

There is a library of "official" video tutorials on YouTube. Other folk have also produced UIBUILDER-related content.

Questions, issues and suggestions

The best place to ask questions or discuss possible enhancements is the Node-RED Forum.

Alternatively, use the GitHub issues log for raising issues or contributing suggestions and enhancements and the GitHub Discussions page for general questions, suggestions, etc.

Other links

Purpose

The purpose of UIBUILDER is to:

Features

The core features of UIBUILDER:

<details><summary>No-code UI's</summary>

UIBUILDER continues to expand its no-code capabilities. THe uib-element, uib-tag, and uib-update nodes offer no-code methods for creating and updating data-driven web UI's.

uib-element takes in simple data and outputs configuration data. This can then be sent to the front-end via the uibuilder node. Alternatively, it can be saved and the result used in an initial load. Several simple options such as tables and lists are available in UIBUILDER v6.1, additional elements and structures will be made available in future versions. The UIBUILDER front-end client takes the configuration information and dynamically builds HTML elements and inserts them to the web page (or removes/updates as needed).

While this is not the most efficient processing approach (since updates are mostly replacing the whole element which could be quite large for things like big tables), it is very efficient from an authoring perspective. So the uib-update node provides a more targetted approach to updating and changing specific attributes and "slot" content for elements.

The uib-tag node then lets you create ANY single HTML element and so covers all the many things that uib-element might not (yet) cover. This even works with web components which are vanilla HTML/JavaScript native enhancements to HTML.

It is important to note that no front-end, 3rd-party frameworks such as VueJS or REACT are needed for this approach! Everything uses vanilla HTML, JavaScript and CSS under the skin and so is compatible with current and future web standards.

</details> <details><summary>Low-code UI's</summary>

The data that uib-element outputs is a format that you can use in your own flows in Node-RED and even in front-end code if desired. It describes a set of HTML UI elements but does not need you to actually write HTML code. The configuration schema is very flexible and even allows you to load configuration data, HTML, scripts, and new ECMA Modules/Components from external files.

The schema and the UI creator functions built into the front-end client are specifically designed to work with current and future HTML standards in order to avoid the kinds of issues commonly encountered when using 3rd-party front-end frameworks (e.g. major version changes forcing rewrites of all of your tooling). So ES Modules, ECMA Components, and future ECMA versions should all be supported.

The ui.js library is now also available for anyone to use in their own projects and works fully stand-alone without UIBUILDER. It is also baked into the uib-html node which turns low-code configurations into HTML from within Node-RED.

</details> <details><summary>Future direction</summary>

UIBUILDER will continue to be independent of front-end frameworks though it will also continue to be as compatible as possible so that any desired framework can be used with it.

Longer term focus

There remains a desire to build a page-builder feature so that people with no coding skills can build great data-driven web apps.

</details> <details><summary>Feature details and benefits</summary> </details>

Contributing

If you would like to contribute to this node, you can contact Totally Information via GitHub or raise a request in the GitHub issues log.

Pull Requests both for code and documentation are welcomed and the WIKI is open to new entries and corrections (but please let me know if you make a change).

Please refer to the contributing guidelines for more information.

You can also support the development of UIBUILDER by sponsoring the development.

ko-fi

GitHub Sponsorship, PayPal Sponsorship

Sponsors

Developers/Contributors

Many other people have contributed ideas and suggestions, thanks to everyone who does, they are most welcome.

<a href="https://stackexchange.com/users/1375993/julian-knight"><img src="https://stackexchange.com/users/flair/1375993.png" width="208" height="58" alt="profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&amp;A sites" title="profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&amp;A sites" /></a>

Please also check out my blog, Much Ado About IT, it has information about all sorts of topics, mainly IT related, including Node-RED.