[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 29 hours ago. On this registry it ranks #58 of 66 tracked projects in Automation, with 5 head-to-head comparisons available.

What is node-red-contrib-uibuilder?

UIBUILDER (node-red-contrib-uibuilder) is an Apache-2.0 licensed Node-RED add-on, written in JavaScript, that lets Node-RED users build custom data-driven web user interfaces — single-page or multi-page, and several at once — either from no-code and low-code nodes driven by Node-RED itself or from full-code front-end templates they edit directly.

What it is

UIBUILDER is an add-on to Node-RED, distributed through the Node-RED Palette Manager as the npm package node-red-contrib-uibuilder. It lives in the Node-RED ecosystem and the broader flow-based-programming world, and it is aimed at people who already run flows and now want a web application attached to them. The project supports two ends of a spectrum and everything in between: no-code and low-code nodes that create UI from Node-RED itself, and full-code front-end templates that the developer edits. No front-end framework is required, but any of them can be used, and the work can be fitted into existing web development workflows rather than replacing them.

The problem it solves is the front-end work that normally sits between a flow and a usable web UI. Building a data-driven interface on top of Node-RED conventionally means hand-writing front-end code and committing to a front-end framework before anything is visible. UIBUILDER replaces that hand-written front-end effort with helper features that reduce or eliminate the code needed to build data-driven web applications and user interfaces integrated with Node-RED, while keeping an escape hatch for teams that want their own templates and toolchain.

Key capabilities

  • No-code and low-code nodes that create the user interface from Node-RED itself.
  • Full-code front-end templates that can be edited directly when the built-in features are not enough.
  • Dynamic data interchange between Node-RED and the browser, so interfaces are data-driven rather than static.
  • Single-page and multi-page interfaces, both supported.
  • Multiple UIs, so more than one interface can be served from the same Node-RED instance.
  • No front-end framework needed, while any framework remains usable.
  • Integration with existing web development workflows, allowing no-code, low-code and full-code approaches to be mixed.

Who uses it and how

  • Node-RED flow developers who want a working web UI without leaving the editor or adopting a separate front-end stack.
  • Web developers who keep their own toolchain and templates, using UIBUILDER primarily for the data interchange with flows.
  • Teams that mix approaches, for example no-code nodes for simple views alongside full-code templates for custom screens.
  • Deployments that need several distinct interfaces, single-page or multi-page, served from one Node-RED installation.
  • An active user base: 528 stars, 92 forks and 10 open issues, with discussion hosted on the Node-RED Forum under the node-red-contrib-uibuilder tag, and documentation on the UIBUILDER homepage and DeepWiki.

Getting started

Install through the Node-RED Palette Manager as node-red-contrib-uibuilder. It requires at least node.js v18 and Node-RED v4, with a current LTS release of node.js recommended; contributing to development needs node.js v24 LTS and the latest Node-RED release.

How it compares

The available facts list no paid products that this project replaces, and they name no similar tools in the same space. UIBUILDER therefore stands alone in this registry, and the comparison has to be made against the general practice of hand-writing a front-end for Node-RED rather than against named competitors.

When to use it — and when not to

Pick UIBUILDER when Node-RED is already the centre of the system and the missing piece is a web interface; the self-hoster must still run and maintain Node-RED itself, on node.js v18 or later and Node-RED v4 or later. Avoid it if Node-RED is not part of the stack, or if nobody wants to operate Node-RED alongside the interface. Note two practical costs: a new major version is released whenever the baseline node.js or Node-RED requirement changes, so upgrades can arrive as major version jumps, and the repository README is largely badges and installation notes, with the substantive documentation hosted on the project homepage and DeepWiki rather than on the GitHub page.

project readme (upstream, from github) — read inline

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, and CHANGELOG-v2.

Other links

Contributing

If you would like to contribute to this node, you can contact Totally Information on the Node-RED Forum, via GitHub, or on Discord 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, Patreon Sponsorship

Sponsors

Developers/Contributors

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

profile for Julian Knight on Stack Exchange, a network of free, community-driven Q&A sites

Please also check out my blogs:

  • Totally Information's Web Log, "Ramblings by Julian Knight on all things Digital, Technology and Life". This is my new blog. It will have articles on Node-RED, web development, hardware reviews and more.
  • Much Ado About IT, it has information about all sorts of topics, mainly IT related, including Node-RED. This is no longer being updated but it will be retained for reference.

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.