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.

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

• UIBUILDER for Node-RED

  • ❓ Ideas, questions & general help - Ask your question on the Node-RED forum using the node-red-contrib-uibuilder tag.
  • 📁 Documentation - Go to the latest documentation.
  • 🧑‍💻 Flows - Example flows, nodes and collections related to UIBUILDER.
  • ℹ️ WIKI - More documentation and examples.
  • 📂 Example Svelte External Template - In case you want to build your own svelte app.
  • 📂 Example Simple External Template - In case you want to build your own external template.
  • 📊 uPlot UIBUILDER extension - Useful charts but also demonstrates how to build your own extension.

• 🧪 Web Components Library - A growing library of useful HTML Web Components. Useable with or without Node-RED & UIBUILDER. Some having specific enhancements for Node-RED but will still work well stand-alone. These now have their own dedicated documentation, demo and test website at https://wc.totallyinformation.net. Please check them out there.

• 🔨 ui library module used by UIBUILDER - Can be used stand-alone for turning UI standard config JSON into HTML.

• 🕜 node-red-contrib-moment - Nodes to make use of the MomentJS date/time handling library in Node-RED.

• 🧙 Alternate Node-RED installer - Some scripts and example configs for running Node-RED locally instead of globally and having the userDir as a child folder so that everything can be easily backed up and restored from a single project folder.

• 🧪 Testbed for Node-RED custom nodes - Embodying more up-to-date thinking than the test nodes, a blank playground.

• 🧪 Test Nodes for Node-RED - Some test nodes for Node-RED that help you understand how everything works.

• 🚤 HotNipi Gauge Web Component - A really nice looking gauge component. Works with Node-RED, UIBUILDER, or stand-alone.

• 🧪 Array Grouper - Stand-alone function to reshape an array of objects.

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.

GitHub Sponsorship, PayPal Sponsorship, Patreon Sponsorship

Sponsors

• @MagicJF

Developers/Contributors

• Julian Knight - the designer and main author.
• Colin Law - many thanks for testing, corrections and pull requests.
• Steve Rickus - many thanks for testing, corrections, contributed code and design ideas.
• Ellie Lee - many thanks for the PR fixing duplicate msgs.
• Thomas Wagner - thanks for the steer and PR on using projects folder if active.
• Arlena Derksen - thanks for suggestions, bug checks and Issue #59/PR #60.
• cflurin - thanks for the cache example.
• Scott Page - IndySoft - thanks for Issue #73/PR #74.
• Stephen McLaughlin - Steve-Mcl - thanks for the fix for Issue #71 and for the enhancement idea Issue #102.
• Sergio Rius - thanks for reporting Issue #121 and providing PR #122 as a fix.
• Thorsten von Eicken - thanks for providing PR #131 to improve CORS handling for Socket.IO.
• meeki007 - thanks for supplying various documentation improvements and code fixes.
• Scott - talltechdude - thanks for supplying PR #170.
• Calum Knott - Thanks for the tidied up node-blue logo.
• Harold Peters Inskipp - Thanks for the logging examples.
• dczysz - Thanks for reporting Issue #186 and helping work through the complex async bug.
• Colin J (mudwalkercj) - Thanks for helping with the documentation.
• Marcus Davies - Many thanks for the encouragement and for the 3d logo.
• Fabio Marzocca (fmarzocca)) - Many thanks for help with the design and testing of the uibrouter front-end router library.
• MysteryCode (mutec)) - Thanks for the PR to fix up the standardised use of fast-glob for returning lists of files.

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

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.