Researching Application GUI Options for Wasm

22nd Mar 2022

Researching Application GUI Options for Wasm

I have used the likes of Figma and often wondered how they used Wasm (or WebAssembly) to power the GUI. I also wondered if there were any existing C++ libraries out there that would provide a good foundation on which to build similar kinds of UIs on the web.

After a bit of research, I have found Dear ImGui which is a well maintained GUI library that can be used on the Web with Wasm but also used for Embedded devices like ESP32.

ImGui Clipping and Dragging
ImGui Clipping and Dragging

Why would I want to do this in the first place? Well, when you are dealing with a UI on top of a large graphical document it can get very slow. The answer to this is to selectively render the visible area into a canvas. Doing this in JavaScript is slow compared to what can be achieved through WebAssembly. Figma wrote in their blog that their load time improved 3x when they moved from JavaScript-based code to Wasm. Wasm code can also run a lot faster once it is loaded.

I'll be continuing this research by building a Miro like GUI. I can base it on jnmaloney's WebGui example. I think I will use React and the DOM to render the toolbars and buttons. I'll then use ImGui and Wasm to control the central window of the workspace.

This series: