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.

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.