# Uibuilder - first "official" video

**URL:** <https://discourse.nodered.org/t/uibuilder-first-official-video/74015>\
**Category:** Share Your Nodes\
**Tags:** uibuilder\
**Created:** [21 January 2023 16:09 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015 "2023-01-21T16:09:32Z")\
**Posts on this page:** 11\
**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:** [21 January 2023 16:09 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/1 "2023-01-21T16:09:33Z")

</div>

[![](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/8084e54e6561317c46be38ed87e85f0edacec16a.jpeg "uibuilder #001") ](https://www.youtube.com/watch?v=IVWR_3cx05A)

I know folk have sometimes asked for videos explaining how to use uibuilder. Well, here is the first from me. 😁

It isn't very good I'm afraid and was somewhat spur of the moment. I also need to learn more about the tools as I can see that the uploaded video quality isn't brilliant for some reason, though the original media was fine.

Feedback and any help on producing better tutorials would be very welcome.

For anyone interested, I used OBS Studio to capture the original desktop output and audio then edited it in VideoProc Vlogger.

---

<div class="post-metadata">

**Author:** ![marcus-j-davies](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/marcus-j-davies/32/103435_2.png) [@marcus-j-davies](https://discourse.nodered.org/u/marcus-j-davies)\
**Post date:** [21 January 2023 18:24 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/2 "2023-01-21T18:24:00Z")

</div>

You didn't include the 2 minute segment to talk about the sponsor, neither was I forced to watch an advert every 1 minute! 😉

But other than that - Nice work!

---

<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:** [21 January 2023 18:26 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/3 "2023-01-21T18:26:50Z")

</div>

> [@marcus-j-davies](#):
>
> You didn't include the 2 minute segment to talk about the sponsor, neither was I forced to watch an advert every 1 minute!

Haha! Maybe when I've got my million subscribers it will be different! 🤔

> [@marcus-j-davies](#):
>
> But other than that - Nice work!

Thanks. Got me started anyway, I need to do more. Especially around the zero-/low-code features which are sufficiently different to other node-red dashboards to warrant some explanation.

---

<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:** [21 January 2023 19:21 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/4 "2023-01-21T19:21:40Z")

</div>

Nice introduction to Uibuilder Julian 👍  
Looking forward to episode 2!

---

<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:** [21 January 2023 20:55 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/5 "2023-01-21T20:55:17Z")

</div>

Well let me know if there is something you would like me to cover specifically and I'll add it to the list.

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [21 January 2023 23:26 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/6 "2023-01-21T23:26:37Z")

</div>

Really useful introduction. Nice work.

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [21 January 2023 23:36 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/7 "2023-01-21T23:36:14Z")

</div>

Excellent tutorial Julian .. well paced and very informative 👍

---

<div class="post-metadata">

**Author:** ![saxenaramesh](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@saxenaramesh](https://discourse.nodered.org/u/saxenaramesh)\
**Post date:** [23 January 2023 16:19 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/8 "2023-01-23T16:19:25Z")

</div>

Great Video, very informative. I really like this ui-builder concept as a whole and slowly learning it to use more and more. Your videos (this one and much awaited next one) will really help me. Thanks for your efforts and hardwork.

---

<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 January 2023 17:41 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/9 "2023-01-23T17:41:29Z")

</div>

Well, let me know if you have a preference for something to cover 😁

I'll probably cover the low-code methods next (sending a msg containing a msg.\_ui configuration property that auto-builds HTML) since that should help a fair few people. But I'm open to doing something different.

---

<div class="post-metadata">

**Author:** ![saxenaramesh](https://avatars.discourse-cdn.com/v4/letter/s/919ad9/32.png) [@saxenaramesh](https://discourse.nodered.org/u/saxenaramesh)\
**Post date:** [26 January 2023 15:11 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/10 "2023-01-26T15:11:37Z")

</div>

If you can have an elaborated video over data exchange with node red, that will be great. For example, how to handle data from Forms, dynamically modify CSS class for HTML elements, fetching data from databases (mysql etc.) and populating to tables built using ui\_builder and so on. It may sound primitive but for intermediate learners, these can be really helpful. 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:** [26 January 2023 17:43 UTC](https://discourse.nodered.org/t/uibuilder-first-official-video/74015/11 "2023-01-26T17:43:07Z")

</div>

Thanks for the suggestions. Just added them to the list. Will see what I can do.

> [@saxenaramesh](#):
>
> It may sound primitive

Not at all, these are helpful subjects.