Qt/qml frontend for Node-RED

  • Hi All,

    Managed to tweak and find a new scenario for qml, based on one of my earlier projects (https://github.com/r0ller/qwa/wiki) which now made possible to use it as a front end for Node-RED. This is just a proof of concept currently but the communication already works between front-end and back-end.

    If anyone is interested, here's the post on the nodered forum:

    Best regards,

  • @r0ller

    Thank you very much for your mentioned links

    I am not very experienced with node-red or web application. Therefore I would be grateful to you if you please answer my following questions.

    1. Node-RED already provides a front end using which we can make flows, connect and analyze data from sensors, then what additional benefit we will get by using QML as front end. (Actually I also want to use QML as front-end instead of node-red please see my following question on Qt foroum but do not know how to integrate QML with node-red).


    1. I could not able to run your following project using QT Kit (Qt Version: Qt 6.12 MinGW 64-bit, Complier: MinGW 8.1.0 64-bit for C++) on Desktop using Qt creator:

    Can you please inform me what mistake I have done.

    Please inform me if you need any other information from me.

    many thanks !!

  • Hi Saurabh,

    Here are my answers:

    1. There's no additional benefit in using QML instead of the default Node-RED ui except that it's QML :) Although, one recent benefit is that the Node-RED ui is built with Angular 1 which is not supported any more by Google so if there's anything that need to be fixed on the Angular side, that won't be done.
    2. The project qml_uibuilder_fe is just the front-end part without integrating it into Node-RED. I'm not sure where you got stuck, but please be aware that it's compiled to webassembly so you'll need to find a Qt guide, how to target wasm. These are the ones I used (since the project is based on Qt5):


    Once you manage to get the front-end compiled, you'll need to make it work with the Node-RED uibuilder node. Here's a complete node-red project that uses the previously mentioned front-end:


    If you clone it, you should be able to start it and test the way I described it on the Node-RED forum. The integration part happens in uibuilder/uibuilder/src into which some of the generated front-end project files are copied. But only the generated qml_uibuilder.html file of the front-end project is modified and renamed to:


    I hope this helps :)

    Best regards,

Log in to reply