Attempting new, short "getting started" guides for UIBUILDER for Node-RED

Share Your Projects
3

1) Getting started with NO HTML — for someone who doesn’t know HTML

Goal: build a simple web page driven entirely from Node-RED nodes (no hand-written HTML/CSS/JS).

Why this works
uibuilder includes dedicated no-code nodes (uib-element, uib-update, uib-tag) that let you describe UI elements in Node-RED and have the uibuilder front-end build them for you. You can also send simple control messages from Node-RED to change those elements at runtime. flows.nodered.org+1

Quick steps (5–10 minutes)

  1. Install uibuilder on your Node-RED host:
    cd ~/.node-red then npm install node-red-contrib-uibuilder. Restart Node-RED after install. npm

  2. Add a uibuilder node to your flow: pick a URL path (for example myui) in the node settings and deploy. You’ll now have a page at http://<node-red-host>:1880/uibuilder/myui. totallyinformation.github.io

  3. Use the no-code nodes:

    • Drag in a uib-element (or uib-tag / uib-update) node from the palette. Configure it (type = list, table, card etc. — options shown in the node).
    • Feed it data via normal Node-RED nodes (Inject, function, MQTT, HTTP in, etc.). The uib-element converts your data into the UI element config and the uibuilder node serves it to the browser. flows.nodered.org

  4. Try a simple example: wire an inject node (payload = a string or JSON) → uib-element (configured to create a “card” or “list”) → uibuilder. Open the page URL in a browser and you should see the element appear. (Example inject flows that include _uib and payload show how Node-RED can push notifications or updates without front-end code). Node-RED Forum+1

  5. Update at runtime: send another message into the uibuilder node (or uib-update) to change text, disable a button, update a table row, etc. Many examples in the community show msg._uib or msg.payload formats to trigger updates. Node-RED Forum

Practical tips

  • Start by importing the built-in example flows (uibuilder ships examples) — they show no-code usage so you can step through what each node does. totallyinformation.github.io

  • If a change doesn’t appear, check the browser console and the Node-RED debug pane. uibuilder reports client connect/disconnect messages in Node-RED. totallyinformation.github.io