Qt GUI Toolkit Ported to JavaScript via Emscripten - Badass JavaScript

We have seen a lot of projects get compiled to JavaScript via Emscripten, including LLVM itself, but nothing quite as complicated and impressive as emscripten-qt, a port of the Qt cross platform GUI toolkit to JavaScript using Emscripten.  Qt already works on many platforms natively including most desktop operating systems and some mobile ones as well, but thanks to Emscripten it can now work in the browser directly.

There are a ton of demos that you can check out showing Qt apps compiled to JavaScript and running in the browser.  For example, the app I screenshotted and included above is a rich text word processor supporting various fonts and text styles, alignments and PDF generation.  Thanks to Emscripten’s File API, you can even open and save documents from a virtual filesystem and access generated PDFs from that filesystem via a link outside the app.

All of the rendering of these apps is done in one large canvas element, which you’d think might be slow, but it turns out that at least for all of the demos I tried, it’s actually really fast and responsive.  Of course, Qt has its own image generation routines built in so it’s using the canvas as basically a way to blit pixels to the screen and nothing more.  It’s pretty much the only way this could possibly work, without rewriting large parts of Qt itself, and it turns out that it works pretty well.  They have an “experimental renderer” that you can enable, that is supposedly faster but I haven’t seen much of a difference.

Let me just make this clear: the only canvas method emscripten-qt is using for rendering is putImageData.  Nothing else.  All text, paths, gradients, and all UI components are all rendered by Qt to pixels before even making it to the canvas.  And it’s still pretty darn fast and smooth.  I think this is both a confirmation that entirely canvas based UI toolkits could be possible as well as a showcase for the power of Emscripten to make use of already written and optimized code on the web.

You can of course, check out the source code for emscripten-qt and the long list of demos I linked to above.  If any of the projects compiled by Emscripten so far show that Emscripten is ready for the wild, Qt is it.  I can’t wait to see what will come next.  I joked last April fools day about a WebKit being ported to JavaScript, and now honestly I’m not sure it’s that far off!