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

Share Your Projects
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