# UIBUILDER - Dummies guild to using uiBuilder

**URL:** https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290
**Category:** General
**Tags:** uibuilder
**Created:** [20 September 2021 14:23 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290 "2021-09-20T14:23:01Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![Sangoma8](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@Sangoma8](https://discourse.nodered.org/u/Sangoma8)
#### Post date: [20 September 2021 14:23 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/1 "2021-09-20T14:23:01Z")

</div>

Hi folks.

I am keen on getting to use uibuilder, but their WIKI is rather difficult to fathom.

Is there an alternate source on information on how to utilise the uibuilder; someting for bummies like me.

I am not a front-end programmer, so I am looking for a step-by-step guide, please.

Many thanks for any pointers.

---

<div class="post-metadata">

### Author: ![bakman2](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bakman2/32/6207_2.png) [@bakman2](https://discourse.nodered.org/u/bakman2)
#### Post date: [20 September 2021 19:33 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/2 "2021-09-20T19:33:09Z")

</div>

> I am not a front-end programmer,

This may become a roadblock, in order to use vue, you will need to understand the concepts of html/css and javascript. There are many resources online, i learn a lot from traversy media on youtube, he has awesome tutorials about all those subjects, from simple to more advanced.

---

<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: [20 September 2021 19:38 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/3 "2021-09-20T19:38:01Z")

</div>

> [@Sangoma8](#):
>
> but their WIKI is rather difficult to fathom

It got a bit out of hand over the years 🙂

> [@Sangoma8](#):
>
> Is there an alternate source on information on how to utilise the uibuilder; someting for bummies like me.

Have you tried the examples in the library?

The best way to learn is by doing. Read through the examples, play with them by adding a few of your own bits and pieces to see how it all fits together.

> [@Sangoma8](#):
>
> I am not a front-end programmer, so I am looking for a step-by-step guide, please

There isn't a step-by-step guide for a very good reason. uibuilder itself is mostly a conduit for communicating between Node-RED as a server managing data flows and your front-end web code.

A basic uibuilder flow is 3 nodes long (see the examples) and the basic front-end code is a couple of dozen lines (see the "simple" example).

The skills lie in writing front-end code. uibuilder lets you use standard web development tools. So to learn, you should pick a simple web tutorial for VueJS and follow that.

---

<div class="post-metadata">

### Author: ![Sangoma8](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@Sangoma8](https://discourse.nodered.org/u/Sangoma8)
#### Post date: [22 September 2021 11:13 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/4 "2021-09-22T11:13:28Z")

</div>

Thank you.

---

<div class="post-metadata">

### Author: ![Sangoma8](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@Sangoma8](https://discourse.nodered.org/u/Sangoma8)
#### Post date: [22 September 2021 11:13 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/5 "2021-09-22T11:13:52Z")

</div>

I will have to learn.

Many thanks

---

<div class="post-metadata">

### Author: ![Sangoma8](https://avatars.discourse-cdn.com/v4/letter/s/53a042/32.png) [@Sangoma8](https://discourse.nodered.org/u/Sangoma8)
#### Post date: [22 September 2021 11:14 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/6 "2021-09-22T11:14:21Z")

</div>

Much appreciated.

Thanks

---

<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: [24 September 2021 16:12 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/7 "2021-09-24T16:12:11Z")

</div>

Please see the first part of a simple walkthrough in this thread:

> [@Uibuilder: Getting Started Walkthrough](https://discourse.nodered.org/t/uibuilder-getting-started-walkthrough-part-1/51483):
>
> OK, so a few people have asked for this and here is the first part! This walkthrough for getting started with uibuilder is a section of what will be a slightly longer page that will go into the uibuilder docs. It may even become uibuilder's README page for the package. Please feed back any thoughts, corrections and ideas. How to get started - 4 steps to a data-driven web app It may look complex, but really it isn't. grinning Install node-red-contrib-uibuilder via Node-RED's "Manage pal…

---

<div class="post-metadata">

### Author: ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)
#### Post date: [23 November 2021 16:12 UTC](https://discourse.nodered.org/t/uibuilder-dummies-guild-to-using-uibuilder/51290/8 "2021-11-23T16:12:56Z")

</div>

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.
