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

**URL:** <https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139>\
**Category:** Share Your Projects\
**Tags:** uibuilder\
**Created:** [23 September 2025 09:04 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139 "2025-09-23T09:04:17Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 September 2025 09:04 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/1 "2025-09-23T09:04:17Z")

</div>

In [another thread](https://discourse.nodered.org/t/formating-current-date-time-in-multiple-format-with-multiple-output-and-simple-calculation/91149/26), @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/](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](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/about), 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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 September 2025 09:05 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/2 "2025-09-23T09:05:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 September 2025 09:06 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/3 "2025-09-23T09:06:26Z")

</div>

# 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](https://flows.nodered.org/node/node-red-contrib-uibuilder?utm_source=chatgpt.com)

**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](https://www.npmjs.com/package/node-red-contrib-uibuilder?utm_source=chatgpt.com)

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](https://totallyinformation.github.io/node-red-contrib-uibuilder/?utm_source=chatgpt.com)

3. **Use the no-code nodes** :

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](https://discourse.nodered.org/t/uibuilder-help-in-developing-a-dashboard/97478?utm_source=chatgpt.com)

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](https://discourse.nodered.org/t/uibuilder-help-in-developing-a-dashboard/97478?utm_source=chatgpt.com)

**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](https://totallyinformation.github.io/node-red-contrib-uibuilder/?utm_source=chatgpt.com)

- 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](https://totallyinformation.github.io/node-red-contrib-uibuilder/?utm_source=chatgpt.com)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 September 2025 09:08 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/4 "2025-09-23T09:08:04Z")

</div>

# 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](https://totallyinformation.github.io/node-red-contrib-uibuilder/?utm_source=chatgpt.com)

**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](https://www.npmjs.com/package/node-red-contrib-uibuilder?utm_source=chatgpt.com)

2. **Edit the front-end template** :

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):

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

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](https://discourse.nodered.org/t/ui-builder-script-to-get-output/75407?utm_source=chatgpt.com)

**Practical tips**

- Use the default template files as a starting point — they include sample code and patterns you can copy. [totallyinformation.github.io](https://totallyinformation.github.io/node-red-contrib-uibuilder/?utm_source=chatgpt.com)

- 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](https://stackoverflow.com/questions/60001158/custom-ui-in-node-red-node-red-contrib-uibuilder-vuejs-import-package?utm_source=chatgpt.com)

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [23 September 2025 16:17 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/5 "2025-09-23T16:17:49Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 September 2025 17:07 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/6 "2025-09-23T17:07:37Z")

</div>

> [@Paul-Reed](#):
>
> you're fired @TotallyInformation

Ah, not quite yet Paul. Maybe in a couple of decades! 🤣 🧙‍♂️

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [23 September 2025 17:10 UTC](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139/7 "2025-09-23T17:10:05Z")

</div>

Anyway, the main README has been simplified and made a bit tighter. You can see it here if you are interested: [README](https://github.com/TotallyInformation/node-red-contrib-uibuilder/blob/v7.5.0/README.md).

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!_