HTML, CSS and JS in a Desktop App... Qt WebEngine vs. Electron vs.?

Heads up! You've already completed this tutorial.

kurtkuschinski8586 | 2021-01-26 18:00:57 UTC | #1

I started to code a software (zen ware - minimal and def. non native UI) to plan and write novels in a highly customizable structured way (using lots of separate drag- and dropable text containers). When I started, I was a very beginner with Qt but okish with python. I learned a lot, mainly by customizing a QTextEdit to fit my needs¹.

I was well aware, that my first approach might fail, but that is how I like to learn: Instead of doing boring tutorials that lead to boring software ("Hello world" yawns), I always start with complex projects and figure stuff out along the way (knowing that I might need to rewrite much, or even to start over)

Along the way I was getting a better idea on how I want my application to work, feel and look...

... sadly I came to the conclusion, that for several reasons using Qt-Widgets might² not be the best way to go in this case. It often feels like I am fighting Qt rather than work with it and some solutions to IMHO quite simple demands (like user adjustable line spacing) are quite hacky (and took quite some time to figure out). Other things seem to be only possible with many many workarounds and hacks (e.g. being able to highlight text that spans several QTextEdits via mouse; user resizable columns in a QGridLayout etc.) .

I do not know much about html, css and even less about js at the moment but my research so far suggests, that it would be the better route (faster, more easy to customize) for much of the stuff I want to do.

After days of research in the Internet how to make a desktop app with it, the obvious solution seems to be electron. But it has some disadvantage (memory consumption, general performance, app bundle size). Now I wonder if Qt WebEngine could be used as browser-widget within my app instead (would it be more lightweight and less resource hungry than using electron?) for most of the GUI staff and have most of the logic still in python? What would be the benefits, what the disadvantages compared to electron?

Packaging Python Applications with PyInstaller by Martin Fitzpatrick — This step-by-step guide walks you through packaging your own Python applications from simple examples to complete installers and signed executables.

More info Get the book

Any ideas and suggestions (also for ways/solutions I did not think of yet) would be very very welcome.

Sorry for the long post, here is an ASCII-potato: 0


1.: With much help from martin and all his free learning stuff - words fail me to describe my respect for the knowledge, time and effort he puts into this. Thank you so so much!

2.: I would not mind being proven wrong.


mike2750 | 2021-02-28 06:51:18 UTC | #2

Qtwebengine is actually a great way to get desktop app native integration i used that approach to integrate a custom xterm.js terminal into my app

You could definitely do that and even use something like tornado/flask for serving the resources up of there not static files

There's even things like this for using python natively in the browser https://brython.info/ https://www.geeksforgeeks.org/introduction-to-brython/


Well done, you've finished this tutorial! Mark As Complete
[[ user.completed.length ]] completed [[ user.streak+1 ]] day streak

HTML, CSS and JS in a Desktop App... Qt WebEngine vs. Electron vs.? was written by Martin Fitzpatrick .

Martin Fitzpatrick has been developing Python/Qt apps for 8 years. Building desktop applications to make data-analysis tools more user-friendly, Python was the obvious choice. Starting with Tk, later moving to wxWidgets and finally adopting PyQt.