# Full dashboard with UIBUILDER

**URL:** <https://discourse.nodered.org/t/full-dashboard-with-uibuilder/83418>\
**Category:** Share Your Projects\
**Tags:** uibuilder\
**Created:** [4 December 2023 14:37 UTC](https://discourse.nodered.org/t/full-dashboard-with-uibuilder/83418 "2023-12-04T14:37:34Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![fmarzocca](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/fmarzocca/32/35901_2.png) [@fmarzocca](https://discourse.nodered.org/u/fmarzocca)\
**Post date:** [4 December 2023 14:37 UTC](https://discourse.nodered.org/t/full-dashboard-with-uibuilder/83418/1 "2023-12-04T14:37:35Z")

</div>

Thanks to [`UIBUILDER`](https://totallyinformation.github.io/node-red-contrib-uibuilder/#/) I made a full dashboard (with 7 routes) using just plain `HTML/JS/CSS`.

- Charts, gauges and tables are using `Google Charts`
- Main HTML structure and styles use my own masonry CSS and `Semantic UI CSS` (for internal grids in each card).
- fully responsive for use on smartphone

Most of data is passed to the App from NR as multilevel objects with different topics handled by `UIBUILDER` in the scripts, while direct commands are sent to NR by using `uibuilder.send()` to specific nodes.

The whole route structure is handled by `UIBUILDER` ( \> v.6.7.0)

I am attaching here few screenshots. Thanks to @TotallyInformation for his great library!

 ![home](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/3/e371a736a1f24145b7e3dd39681d4fe66c5d126c.jpeg)  
 ![menu](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/7/b74c1e38bdc22416831c2452123fa4022edf4c64.png)  
 ![services](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/4/2437260b1b96491a56eb1ba2de3e24d6dc972ada.png)  
 ![sprinkler](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/5/b5c47594fe2753dffdeec3e505986f9d3679c00a.png)

---

<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:** [4 December 2023 21:16 UTC](https://discourse.nodered.org/t/full-dashboard-with-uibuilder/83418/2 "2023-12-04T21:16:51Z")

</div>

And it looks great! Thanks for sharing, I love the clean look.

For those following along, Fabio has done most of the UI work here in the front-end (browser) and most of the data work in the back-end (Node-RED) - a traditional web coding approach.

Lovely to see people ditching unnecessary front-end frameworks like Vue and acknowledging the power of the modern DOM. With a sprinkling of help from UIBUILDER of course. 😉 And a nice example of the relative ease that just a small amount of help from a small library brings to front-end programming.

This would, of course, also all be doable using no-/low-code programming in Node-RED but sometimes the standard methods are the easiest as in this case.

Thanks for sharing Fabio, and thanks for your patience and input as I threw together the new UIBUILDER front-end router library which I think a lot of people will find useful. It is, to my mind (and yes, I'm more than a little biased!) MUCH simpler to use than any of the router libraries I've used with Vue and other frameworks.