[opensourcedex]

node-red-contrib-uibuilder is a free, open source automation project written in JavaScript and released under Apache-2.0. It has 528 GitHub stars, 92 forks and 10 open issues, and was last pushed 10 days ago. On this registry it ranks #89 of 96 tracked projects in Automation, with 5 head-to-head comparisons available.

Discussion Documentation Ask DeepWiki Sponsor

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

UIBUILDER FOR Node-RED

Easy data-driven web UI's. Batteries included!

UIBUILDER is a Node-RED add-on that makes it easy to build custom web UIs that talk to your flows (web applications). It supports no-code & low-code nodes (create UI from Node-RED itself), full-code front-end templates you edit, and everything in between.

No-code and Low-code options, driven from Node-RED || Dynamic data interchange Node-RED browser || No front-end framework needed but use any of them if you want to || Integrate with existing web development workflows

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.

Installation

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

Note that UIBUILDER requires at least node.js v18 and Node-RED v4. You should be using a current LTS version of node.js. If you want to help develop UIBUILDER, you will need at least node.js v24 LTS and the latest release of Node-RED. UIBUILDER will release a new major version when the baseline node.js and/or Node-RED versions are increased.

Manual installs and other versions

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 usually 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.

Quickstart Guide

For a super-quick start, once installed, please see the Getting Started guide.

For more guidance, check out the First-timers walkthrough and the Introduction Video.

Also try out the built-in example flows (via the Node-RED Import menu).

Documentation and other links

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.

The Node-RED Forum has a dedicated UIBUILDER tag for questions, discussions, ideas, support, examples and FAQ's.

You can use the GitHub issues log for raising issues.

There is also a dedicated Discord channel.

Purpose

The purpose of UIBUILDER is to:

  • Support easy methods for creating and delivering data-driven web apps and web pages (also known as web User-Interfaces).
  • Be a conduit between Node-RED and front-end (browser) UI web apps.
  • Be UI framework agnostic. No framework is needed to use UIBUILDER but it will work with them where desired. UIBUILDER aims to reduce the requirement for a framework by making it easier to work with vanilla HTML/CSS.
  • Provide interface/data standards for exchanging data and controls between Node-RED and the web pages.
  • Enable the creation and management of multiple web apps from a single Node-RED instance.
  • Reduce the amount of front-end code (HTML/JavaScript) needed to create and manage a web app.
  • Reduce the knowledge required for creating reliable, accessible web apps by providing low-code and no-code features. But still ensure that any learning is applicable to general web development.
  • Make it easy to install and serve front-end libraries to support the development of more complex web apps.

Compatibility of current release

  • Servers:
    • Node-RED: v4+
    • Node.js: v18+ LTS (matches Node-RED v4+ requirements)
    • Platforms: Linux, Windows, MacOS, Raspberry Pi, Docker, FlowFuse, etc.
  • Browsers:
    • CSS - 0.12% or above of global usage but not Internet Explorer (ref.). The uncompiled CSS should work in all current mainstream browsers. The compiled CSS (uib-brand.min.css) should work in browsers back to early 2019, possibly before. Enforced by LightningCSS.
    • JavaScript - ES6+ so should work in all current mainstream browsers. The compiled JS (uibuilder.min.{iife|esm}.js) should work in browsers back to early 2019, possibly before. Enforced by ESBuild. Script (IIFE) and Module (ESM) versions are provided.

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](https://totallyinformation.github.io/node-red-contrib-uibuild

readme truncated — read the full docs on github

Frequently asked questions

Is node-red-contrib-uibuilder free to use?

node-red-contrib-uibuilder is open source under the Apache-2.0 licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does node-red-contrib-uibuilder do?

Easily create data-driven web UI's for Node-RED. Single- & Multi-page. Multiple UI's. Work with existing web development workflows or mix and match with no-code

What is node-red-contrib-uibuilder written in?

node-red-contrib-uibuilder is primarily written in JavaScript. Its source is publicly available at https://github.com/TotallyInformation/node-red-contrib-uibuilder, and it has 528 GitHub stars.