# 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:** 4

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

---

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