# Node-Red GUI Layout

**URL:** https://discourse.nodered.org/t/node-red-gui-layout/21581
**Category:** Dashboard
**Created:** [12 February 2020 06:21 UTC](https://discourse.nodered.org/t/node-red-gui-layout/21581 "2020-02-12T06:21:08Z")
**Posts on this page:** 5
**Page:** 1

<div class="post-metadata">

### Author: ![Ujjwal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ujjwal/32/16904_2.png) [@Ujjwal](https://discourse.nodered.org/u/Ujjwal)
#### Post date: [12 February 2020 06:21 UTC](https://discourse.nodered.org/t/node-red-gui-layout/21581/1 "2020-02-12T06:21:08Z")

</div>

Hey

i was trying to build a GUI for a robot on Node-Red.... but is has a very basic layout adjustment options, its like everything in in simple row and column form and options to place buttons and video window is also very limited is there in other way to have a proper application like GUI using Node-Red.

---

<div class="post-metadata">

### Author: ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)
#### Post date: [12 February 2020 07:23 UTC](https://discourse.nodered.org/t/node-red-gui-layout/21581/2 "2020-02-12T07:23:03Z")

</div>

The Dashboard wasn't built for complex UIs. (_While they are possible to some degree..._ 😅)

You can have a look at Julian's (@TotallyInformation) UiBuilder. It just provides the basics and leaves the complete UI up to you.

> **[node-red-contrib-uibuilder](https://flows.nodered.org/node/node-red-contrib-uibuilder)**
>
> Easily create web UI's for Node-RED using any (or no) front-end library. VueJS and bootstrap-vue included but change as desired.

Another route could be the Dashboard and SVG, developed by @BartButenaers and @Steve-Mcl. They have even built some SCADA interfaces with it.

> **[node-red-contrib-ui-svg](https://flows.nodered.org/node/node-red-contrib-ui-svg)**
>
> A Node-RED widget node to show interactive SVG (vector graphics) in the dashboard

---

<div class="post-metadata">

### Author: ![Ujjwal](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ujjwal/32/16904_2.png) [@Ujjwal](https://discourse.nodered.org/u/Ujjwal)
#### Post date: [12 February 2020 09:42 UTC](https://discourse.nodered.org/t/node-red-gui-layout/21581/3 "2020-02-12T09:42:10Z")

</div>

@kuema thanks for your help will go through the links...  
so can i make a GUI using nodejs , js and upload it on node-red to control my robot ?

---

<div class="post-metadata">

### Author: ![kuema](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kuema/32/6542_2.png) [@kuema](https://discourse.nodered.org/u/kuema)
#### Post date: [12 February 2020 10:08 UTC](https://discourse.nodered.org/t/node-red-gui-layout/21581/4 "2020-02-12T10:08:54Z")

</div>

Basically, yes. The implementation details depend on the technology you decide to use.  
You could even do everything within Node-RED by creating custom routes with the HTTP nodes.

---

<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: [13 March 2020 10:09 UTC](https://discourse.nodered.org/t/node-red-gui-layout/21581/5 "2020-03-13T10:09:02Z")

</div>

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