# Why would I want to use UIBUILDER?
**URL:** https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683
**Category:** Share Your Nodes
**Tags:** uibuilder
**Created:** [30 September 2023 11:40 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683 "2023-09-30T11:40:57Z")
**Posts on this page:** 19
**Page:** 1
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [30 September 2023 11:40 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/1 "2023-09-30T11:40:57Z")
[](https://flows.nodered.org/node/node-red-contrib-uibuilder)
[Let's get started! (A 1st walkthrough)](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/walkthrough1)
Hi all, sharing the first draft of this entry that is being added to the UIBUILDER documentation. There was some commentary recently from someone asking what benefit UIBUILDER would have over http-in/-out nodes. This is a brief attempt to answer that kind of question.
Note the change from "uibuilder" to "UIBUILDER". 🙂 In the actual documentation, this now appears like this everywhere (except in code of course) - many thanks to suggestions from forum members on enhancing the branding - still a work in progress so please feel free to comment
* * *
# Why would I want to use UIBUILDER?
Node-RED has several ways to deliver web pages already. Why would I want to use UIBUILDER instead? And are there any times I might not want to use it?
## UIBUILDER potential benefits
- _Web pages with integrated websockets and other support tools_.
No code is needed for any of this. Even the simplest template gets you going straight out of the box.
- _External libraries_.
- _Templates_.
- _Combine no-code, low-code and front-end code approaches_.
- _Multi-user web apps_.
- _Easier multi-developer workflows_.
- _Not bound to a front-end framework, but can use any of them if desired_.
- _Multiple web apps_.
- _Use different web server settings than Node-RED_.
## Alternatives to UIBUILDER
- _Dashboard_.The original data-driven web app builder for Node-RED.
- _Core nodes: http-in/http-out/websocket-in/websocket-out/template_.
- _"Dashboard v2" (In early alpha development as at September 2023)_.
There are a number of other possible contributions, but none are production ready and most are abandoned.
With the exception of the core nodes, all of the alternatives bind you to a specific front-end framework.
## Are there situations NOT to use UIBUILDER?
Absolutely.
- _If you need to get going really quickly and haven't used uibuilder before_.
- _If you need layout help from within Node-RED_.
- _If your Node-RED instance is hosted without a filing system_.
- _If you don't need any of UIBUILDER's features_.
---
### Author:  [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)
#### Post date: [1 October 2023 02:06 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/2 "2023-10-01T02:06:02Z")
> [@TotallyInformation](#):
>
> Why would I want to use UIBUILDER?
Well if you don't you wasted a lot of time developing it 😉
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [1 October 2023 10:53 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/3 "2023-10-01T10:53:09Z")
A point that would be made by my wife!
Though actually, it is a relaxing hobby believe it or not. It is a creative outlet akin to gardening or DIY (both of which I am not very good at 🙂 ).
I've learned loads and kept my brain active and it is sufficiently different to my day-job that it continues to be relaxing.
So actually, I'd probably continue with it even if nobody wants to use it! But as it has consistently had just under 2,500 downloads a month over its entire life (since April 2017), either someone enjoys downloading it for the sake of it or _someone_ is using it.
---
### Author:  [@jbudd](https://discourse.nodered.org/u/jbudd)
#### Post date: [1 October 2023 14:02 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/4 "2023-10-01T14:02:28Z")
I like the topic: Why would I want to use ...
There should be a series
- Home Assistant
- ZigBee
- Mqtt
- Flowfuse
- The Catch node
- Etc
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [1 October 2023 17:03 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/5 "2023-10-01T17:03:56Z")
Cool idea. Maybe you could get the ball rolling? I think that the FAQ category would be great for this.
---
### Author:  [@PizzaProgram](https://discourse.nodered.org/u/PizzaProgram)
#### Post date: [2 October 2023 07:03 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/6 "2023-10-02T07:03:46Z")
> [@TotallyInformation](#):
>
> Sadly, uibuilder still does not have a GUI layout editor like Dashboard does.
This will be a real game-changer! I will switch to it too, as soon as it is finished.
Thank you very much in name of all of us, for your time and energy you have invested into it so far.
Keep up the great work 😉
Edit:
- you should add a LINK to uibuildier on the top of the page.
- and maybe a link to a step-by-step "how to start" page / tutorial.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 October 2023 10:18 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/7 "2023-10-02T10:18:48Z")
> [@PizzaProgram](#):
>
> you should add a LINK to uibuildier on the top of the page
Good point - as this started as an extract of the UIBUILDER docs, the links are there - but good point. Will add shortly.
> [@PizzaProgram](#):
>
> and maybe a link to a step-by-step "how to start" page / tutorial.
OK, but this wasn't really meant to be a stand-alone page. I will update to point to the right pages here though so people can go direct as well.
> [@PizzaProgram](#):
>
> > [@TotallyInformation](#):
> >
> > Sadly, uibuilder still does not have a GUI layout editor like Dashboard does.
>
> This will be a real game-changer! I will switch to it too, as soon as it is finished.
I find this quite interesting. My own thinking has always been around a full page designer. Of course, this is very different to what Dashboard provides. And it is pretty complex but certainly achievable - just beyond my current available time sadly.
However, I am starting to design another intermediate capability that would be more along the lines of what Dashboard provides. Though I'm not totally certain yet whether this will simply be a new element type on the `uib-element` node or whether it warrants being another node.
This is the idea of a `layout` element. Such an element would define the layout type - grid or flex for example (though probably only grid to start with, same as Dashboard). Then it would have settings available for the grid such as max/min width, number of columns, etc. This is actually a lot more flexible than Dashboard since a layout element would simply be another `div` in the browser and so you could define a layout at any level, not be forced into a single layout for the whole page.
The `uib-element` node would also gain a new "width" setting to allow overriding of the current defaults (set by your CSS file) which would allow setting the width in a number of columns out of the layout number of columns - which is how Dashboard also does it.
Because elements are chainable, you would simply put the layout node before any of the elements to go into the layout.
So the result should be something more flexible than Dashboard but with the same basic concept but different execution. It wouldn't have the visual sidebar that Dashboard has but changing the position of "widgets" (elements in uibuilder speak) would simply be a matter of swapping the order of nodes in the flow.
Would also need a `group` element to match the group Dashboard node.
Thoughts and feedback welcome as always. This is not a finalised design but is my current thinking.
> [@PizzaProgram](#):
>
> Thank you very much in name of all of us, for your time and energy you have invested into it so far.
> Keep up the great work 😉
No problem, thanks for the thanks 🤣
---
### Author:  [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)
#### Post date: [2 October 2023 11:24 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/8 "2023-10-02T11:24:03Z")
> [@TotallyInformation](#):
>
> Sadly, uibuilder still does not have a GUI layout editor like Dashboard does.
I don't consider this a negative note. On the contrary, it gives you absolute freedom to build your site GUI as you want, no constraints!
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 October 2023 11:36 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/9 "2023-10-02T11:36:46Z")
> [@fmarzocca](#):
>
> I don't consider this a negative note. On the contrary, it gives you absolute freedom to build your site GUI as you want, no constraints!
😉
But some people do want this so certainly still looking at the right approach. I'm currently thinking that the approach outlined above would be a decent compromise. And it has a number of other benefits. It can be implemented in stages if needed. It can be extended beyond a grid layout. It retains the ability to mix-and-match no-code, low-code and full-code designs.
A proper page designer is something I'd love to have in the future but I suspect it might be a full-time development/maintenance job in its own right. So probably won't happen unless someone else steps up to help. But this approach is close to what Dashboard already provides, just does it in a slightly different and much more flexible way.
By the way, I haven't forgotten that Dashboard has "Page" and "Theme" sidebar tabs as well. Those are actually pretty simple to achieve with UIBUILDER and certainly also on the roadmap.
In fact, I already did a theming PoC quite a while back and it is still available in the experimental Web Components library - it pops a configuration window at the top of the page. Of course, one of the advantages of UIBUILDER is that you can do things both in front-end code (as that was effectively) and from Node-RED.
---
### Author:  [@HaroldPetersInskipp](https://discourse.nodered.org/u/HaroldPetersInskipp)
#### Post date: [2 October 2023 11:51 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/10 "2023-10-02T11:51:01Z")
I keep seeing your post title and thinking to myself, why wouldn't you want to use UIBUILDER? I'd be crazy not to for some of these projects.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [2 October 2023 12:15 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/11 "2023-10-02T12:15:38Z")
🤣 I'd agree but I'm possibly slightly biased?
---
### Author:  [@bobcroft](https://discourse.nodered.org/u/bobcroft)
#### Post date: [3 October 2023 19:35 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/12 "2023-10-03T19:35:49Z")
I have taken a quick look through the documention and tried the first steps, it certainly looks very impressive and has great potential. That is from someone who knows nothing about HTML, CSS, Vue etc. and very little Javascript too. The one issue that has been discussed recently and no one knows the answer is when Node-RED runs under Home Assistant for either ui node-red tried to open the ui at port 8123 not port1880. If I manually enter port 1880 UI builder opens perfectly as does 'dashboard'.
I'll have to get round to asking on the HA forums. I cannot believe that someone hasn't solved this issue with HA and Node-Red.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [3 October 2023 19:55 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/13 "2023-10-03T19:55:46Z")
Thanks for the feedback.
re Home Assistant. There is something extra you can do with UIBUILDER if you wanted to. It allows you to switch to using an independent web server on its own port. It is easy to do simply by changing some settings in the optional `uibuilder` section of `settings.js`. That might save confusion with Node-RED's port.
---
### Author:  [@bobcroft](https://discourse.nodered.org/u/bobcroft)
#### Post date: [3 October 2023 20:02 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/14 "2023-10-03T20:02:37Z")
Thank you for the suggestion. I'll look into it but I really would like to get to the bottom of the problem with HA. I have an instance of NR running on a seperate Linux machine, I can't remember if it is native, in a Docker container or running under IOTsensor (was IOTstack) which will be in a Docker container anyway. On that instance clicking the dashboard icon goes to the correct 1880 port. I may well install uiBuilder on that PC to learn how to use it. I also have NR running native on my Windows 10 PC and the ui works correctly on that machine too.
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [3 October 2023 21:38 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/15 "2023-10-03T21:38:30Z")
This topic is about uibuilder, if you have a problem with HA, maybe asking for help in the HA support forum would be a better option.
---
### Author:  [@bobcroft](https://discourse.nodered.org/u/bobcroft)
#### Post date: [3 October 2023 21:43 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/16 "2023-10-03T21:43:29Z")
I am well aware of what this topic is about and I have indeed raised the issue on the relevent HA forum. The sole purpose of my post was trying to be helpful and highlight an issue that other people, feeling thier way as beginners with UI builder, will come across. If I do suceed in finding the solution I will share that too!
---
### Author:  [@craigcurtin](https://discourse.nodered.org/u/craigcurtin)
#### Post date: [4 October 2023 06:13 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/17 "2023-10-04T06:13:55Z")
> [@bobcroft](#):
>
> If I manually enter port 1880 UI builder opens perfectly as does 'dashboard'.
> I'll have to get round to asking on the HA forums. I cannot believe that someone hasn't solved this issue with HA and Node-Red.
You need to remember that when you run NR under HA you are actually firing up a docker container - i am pretty sure they do not expose that file system to you as the end user.
You would be better off installing Node Red on a different box/VM and then install the Node Red Webhooks add in that provides the link between NR and HA - you will get all the same functionality out of the box and not be tied into their release schedule or limitations.
Craig
---
### Author:  [@bobcroft](https://discourse.nodered.org/u/bobcroft)
#### Post date: [4 October 2023 07:29 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/18 "2023-10-04T07:29:43Z")
Hi Craig, thanks for the reply that all makes sense. I can run Node Red on a seperate box (Linux) and it could be dedicated to Node Red. I am not clear about the webhooks add in, is that done in Node Red or HomeAssistant?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [4 October 2023 10:53 UTC](https://discourse.nodered.org/t/why-would-i-want-to-use-uibuilder/81683/19 "2023-10-04T10:53:45Z")
Sorry guys, but could you take this conversation to another thread as it isn't directly relevant to UIBUILDER. Thanks.
I can move the posts to a new thread if you want me to. It is an important conversation.