Easily create data-driven web UI's for Node-RED using any (or no) front-end library.
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.
UIBUILDER is best installed using Node-RED's Palette Manager.
Manual installs and other versions
To install manually, from a command line on your Node-RED server:
npm install node-red-contrib-uibuilder
To install old versions:
npm install [email protected]
To install development branches, please install from GitHub:
npm install totallyinformation/node-red-contrib-uibuilder#branchname
You will need to restart Node-RED if installing manually.
The current CHANGELOG contains all of the changes and requirement details for each version.
Once installed, The following is a typical simple flow to get going.
- Add a
uibuildernode. Open its settings and give it a "URL" which is used as the identifying name. Close the settings and click on the Deploy button.
- Add an inject node for some simple input data and two debug nodes on the two output ports so that you can see everything that is going on. Deploy the flow.
- Re-open the
uibuildernode's settings and click the "Open" button to see the resulting web page.
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.
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.
Questions, issues and suggestions
The best place to ask questions or discuss possible enhancements is the Node-RED Forum.
- ❓ 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
- 🔨 Event Handler module used by UIBUILDER - So you can see some of the inner workings
🔨 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
🧪 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
🧪 Experimental Web Components - Have some Node-RED & UIBUILDER specific enhancements but also work well stand-alone
🧪 Array Grouper - Stand-alone function to reshape an array of objects
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 knowledge required for creating reliable, accessible web apps by providing low-code and no-code features.
- Make it easy to install and serve front-end libraries to support the development of more complex web apps.
The core features of UIBUILDER:
- Nodes to enable zero-code translation of input data to usable and accessible web elements.
- Capability for low-code, configuration-driven (data-driven) UI's. Creating a framework for describing a UI and translating to actual code without having to write code.
- 2-way communications channel between the Node-RED server (back-end) and front-end UI.
- A Node-RED node to act as the focus for communications with other nodes for additional ease of use.
- Front-end library to: do the complex parts of the communications in the client browser; make manipulation of the UI easier and more consistent; make it easy to get data back to Node-RED as needed (both automatically and manually).
- Easy to use templates and examples for front-end code to enable people to get a quick start on creating web apps.
- Management and serving of npm packages that provide front-end libraries consumable easily by front-end code.
- Editing of front-end code from the Node-RED Editor (designed for small changes, use web development tools generally).
- Various server middleware and API options for additional custom capabilities.
- A caching capability allowing newly joining clients to receive the latest data and configurations. Joining/leaving clients create notifications in Node-RED.
- A front-end lightweight router for creating Single-Page Apps.
- Have as many
uibuildernode instances as you like. Each instance allows the creation of many web pages and sub-folders for easy management.
uibuildernode instance provides a private 2-way communications channel between the Node-RED server (back-end) and browser (front-end) UI code.
- Supports the use of standard web development workflows.
- Allows the creation of a dedicated web service to facilitate independent security.
UIBUILDER continues to expand its no-code capabilities. THe
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.
uib-tag node then lets you create ANY single HTML element and so covers all the many things that
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.
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.
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.
- It will continue to gain more zero-code pre-built elements.
- It will gain improved control over the instance root folder structure and the ability to execute
npm runscripts defined in the
- More videos!
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.
- The documentation quality will continue to improve.
- The number of 3rd-party module dependencies will be reduced. Starting with the eventual removal of
fs-extrain favour of the native promisified fs library. Followed most likely by
- Once Node.js v18 or 20 is the base, the code is likely to be refactored into multiple sub-packages in a mono-repo.
Feature details and benefits
- Designed as an alternative to the Node-RED official Dashboard. Without the overheads and restrictions.
- Control everything from the Node-RED admin ui. Edit your front-end resource files, manage front-end packages. No need to access the servers command line.
- Manage startup templates. Internal templates for vanilla HTML, Svelte, VueJS (v2 & v3), and VueJS/bootstrap-vue are provided. Load templates from other repositories via degit. Makes it easy to share templates that provide a whole app or just deal with boilerplate.
- Have as many custom user interfaces as you want. Just 1 node is needed for each entry point. Use link nodes to send data from other parts of your flows. An entry point can be contain multiple web pages.
- Has a control interface separate to the message interface. Know when a browser tab connects or disconnects, send cached data, and more.
- Provide a stable client id that identifies a specific browser profile until it is restarted. A tabId is provided that identifies a specific browser tab on a client device.
- Provide information to Node-RED about the client that is sending a msg so that security and other processing can identify the client, the user, and so on.
- Can be a lot lighter in weight and more mobile friendly than the Node-RED official Dashboard.
- Use any front-end framework you like. Simply install via the built-in library manager.
- Use without any front-end framework if you prefer. Keep it light and simple. Try this out with the "Blank" template and the
- The included front-end libraries (
uibuilder.esm.js) provide connectivity to Node-RED and msg event handling along with some helper utility functions.
- Edit your custom front-end code from within the Node-RED Editor. Auto-reload your clients on changes to the code. Great for rapid development. Note that this is designed for quick edits, it is recommended to use your normal web development toolchain for larger edits.
- Needs almost no boilerplate in your front-end code in order to work.
- Optional index web page listing of available files.
- Two detailed admin info web pages are included to help authors understand where everything is and what is available.
- Uses Node-RED's own ExpressJS webservers by default. Switch to a custom ExpressJS server if desired. When using a custom server, pages can also include EJB server-side templating.
- Has middleware for ExpressJS (for web services) and Socket.IO (for communications, both at initial connection and per-message) so that you can add your own custom features including security.
- Can create custom API's for each UIBUILDER instance.
- Use the
ui.jslibrary in your own projects!
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.
- 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.
Many other people have contributed ideas and suggestions, thanks to everyone who does, they are most welcome.
Please also check out my blog, Much Ado About IT, it has information about all sorts of topics, mainly IT related, including Node-RED.