# 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:** 1\
**Showing post:** 3

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

---

_[View the full topic](https://discourse.nodered.org/t/attempting-new-short-getting-started-guides-for-uibuilder-for-node-red/99139)._