# Qt/qml frontend with uibuilder

**URL:** <https://discourse.nodered.org/t/qt-qml-frontend-with-uibuilder/47137>\
**Category:** General\
**Created:** [14 June 2021 13:15 UTC](https://discourse.nodered.org/t/qt-qml-frontend-with-uibuilder/47137 "2021-06-14T13:15:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![r0ller](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/r0ller/32/14327_2.png) [@r0ller](https://discourse.nodered.org/u/r0ller)\
**Post date:** [14 June 2021 13:15 UTC](https://discourse.nodered.org/t/qt-qml-frontend-with-uibuilder/47137/1 "2021-06-14T13:15:19Z")

</div>

Hi All,

I've just managed to connect a (minimal) qml frontend to nodered via uibuilder. Just posting it here if anyone is interested in qml. As I anyway have a Qt/qml architecture which I'm trying to use whereever it's possible I tweaked that ( [https://github.com/r0ller/qwa/wiki](https://github.com/r0ller/qwa/wiki) ) to fit the nodered scenario. Due to that, the minimal c++ frontend (compiled to webassembly) that takes care of the communication with uibuilder contains some irrelevant code for this scenario but I plan to clean it up.

The pure Qt/qml frontend is here: [https://github.com/r0ller/qml\_uibuilder\_fe](https://github.com/r0ller/qml_uibuilder_fe)

The nodered+uibuilder (say backend) project with the relevant Qt/qml artifacts from the frontend (index.html, qtloader.js, etc.) is here: [https://github.com/r0ller/qml\_uibuilder\_be](https://github.com/r0ller/qml_uibuilder_be)

The proof of concept currently looks like this in nodered:

 ![qml_uibuilder1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/3/9317880cf1da5a1710e1faab38f3de58800796fa.jpeg)

and this is how the qml part looks like in Qt Creator:

 ![qml_uibuilder0](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/f/8/f89213bbed96dcdbd1bf3569edcbaa38c7d224cd.jpeg)

The demo can currently:

1. present the ui  
 ![qml_uibuilder2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/b/8b55d0e316d20e3a340d0596bd6dcc980b462ab8.jpeg)

2. send a message payload ("Hello Node-RED!") to the backend when the button is clicked:  

3. receive a message from the backend ("Hello QML!") and update the qml ui:  

Best regards,  
r0ller

---

<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:** [14 June 2021 14:05 UTC](https://discourse.nodered.org/t/qt-qml-frontend-with-uibuilder/47137/2 "2021-06-14T14:05:20Z")

</div>

Cool. Thanks for sharing.

---

<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 August 2021 14:05 UTC](https://discourse.nodered.org/t/qt-qml-frontend-with-uibuilder/47137/3 "2021-08-13T14:05:23Z")

</div>

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