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

Share Your Projects
1

In another thread, @bakman2 asked a great question about whether I had considered trying to get an AI to write a getting started summary for UIBUILDER.

For various reasons, I had not! But it was a good suggestion and so, I did. Here is the result.

These are the instructions I gave the AI. I used ChatGPT v5 in "thinking" mode.

The answers are not perfect by any means but I will see how they can be incorporated into the documentation. Please do comment on them, all input is welcome.

Considering a fairly new user of the Node-RED low-code development platform (https://nodered.org/), will very little experience of HTML, CSS or JavaScript. This person wants to create a custom web app with the help of Node-RED and they discover that there is a popular extension, node-red-contrib-uibuilder that they believe will help them do what they want. However, with little HTML knowledge, they find the uibuilder rather daunting to get started with.

Analyse the uibuilder documentation found at UIBUILDER Documentation v7, and create two succinct "getting started" summary documents aimed at the type of person outlined above.

The summaries should show:

  1. For someone with no knowledge of HTML, how to get started with uibuilder using the no-code/low-code uibuilder nodes. This summary should not require any custom front-end HTML, CSS or JavaScript.

  2. For someone with a little HTML/CSS/JavaScript knowledge, how to get started with uibuilder using a mix of uibuilder's built-in components and possibly a little JavaScript. Highlighting that minimal HTML is needed in order to be able to display data from Node-RED dynamically.

Both summaries should aim to be around 1 page long and be readable in no more than 5 minutes by someone with US average education.

2

The AI's "Quick Context".

Quick context (one line)

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

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

4

2) Getting started with a little HTML/CSS/JS — for someone ready to tweak front-end

Goal: use uibuilder’s built-in helpers + a tiny bit of HTML/JS so your page can display live data from Node-RED.

Why this approach
You get the polish and flexibility of small front-end edits (a label, an output area, a button) while still using Node-RED to feed live data. uibuilder gives a lightweight front-end library and templates you can edit from your Node-RED user directory. totallyinformation.github.io+1

Quick steps (10–20 minutes)

  1. Install & add a uibuilder node (same as above). Open the page to confirm the default template loads. npm+1

  2. Edit the front-end template:

    • uibuilder stores front-end files under ~/.node-red/uibuilder/<your-url>/src (copy or edit index.html, index.js, index.css from the provided templates).
    • A tiny index.html body could be just <div id="temp">Waiting…</div> — that’s all you need to start. GitHub

  3. Use the uibuilder client API (very small JS)
    Inside index.js (the tiny script you edit) you can react to messages from Node-RED and update DOM elements. Example minimal code (works with the uibuilder client shipped with the node):

    // run in your uibuilder front-end index.js
// callback when a message arrives from Node-RED
uibuilder.onChange('msg', (msg) => {
  // msg.payload holds the data you send
  document.getElementById('temp').textContent = String(msg.payload)
})

    To send data from Node-RED, wire an inject or function node with the value to the uibuilder node (msg.payload = 42). The JS above will update the <div> automatically. (The community docs and examples show uibuilder.onChange and uibuilder.send usage). Node-RED Forum+1

  4. Add a control (optional): place a <button id="btn">Click</button> and add:

    document.getElementById('btn').addEventListener('click', () => {
  uibuilder.send({topic:'button', payload:'clicked'})
})

    In Node-RED, wire the uibuilder node’s first output to a debug node to see the message when the button is pressed. GitHub

  5. Small HTML is enough: you don’t need frameworks. A few DOM elements + 10–20 lines of JS already let you display and control live data. Use uibuilder.send() to talk back to Node-RED and uibuilder.onChange() to receive. Node-RED Forum+1

Practical tips

  • Use the default template files as a starting point — they include sample code and patterns you can copy. totallyinformation.github.io

  • Keep markup semantic (IDs for elements you intend to update). Test in the browser and watch Node-RED debug output.

  • When you outgrow tiny scripts, you can add front-end libraries (Vue, React, Chart libs) via the node’s “manage front-end libraries” option or by editing the uibuilder folder. Stack Overflow

2 Likes
5

With AI writing the UIBUILDER documentation and also the UIBUILDER code, you're fired @TotallyInformation :wink:

6

Ah, not quite yet Paul. Maybe in a couple of decades! :rofl: :man_mage:

2 Likes
7

Anyway, the main README has been simplified and made a bit tighter. You can see it here if you are interested: README.

I will be adding a new quickstart guide to the main docs with a selector for the two different approaches to getting started: I'm happy with some code and No code for me thanks!

1 Like