Building for the web (WebAssembly)

Umfeld runs in the browser by compiling your C++ sketch to WebAssembly with Emscripten. The same application.cpp you run on the desktop becomes a .wasm module that executes at near-native speed in any modern browser — no rewrite and no separate web version to maintain.

One-time setup

You need Emscripten and an Umfeld checkout on the WebAssembly branch:

brew install emscripten      # or install the emsdk toolchain
git clone -b feature/dev-web-assembly https://codeberg.org/umfeld/umfeld

Point your sketch’s CMakeLists.txt UMFELD_PATH at that checkout.

Building a sketch to WebAssembly

Configure and build with Emscripten’s CMake wrappers — the only difference from a desktop build is emcmake in front:

emcmake cmake -B build -S . -DCMAKE_BUILD_TYPE=Release
cmake --build build --parallel

Emscripten emits an .html, .js, and .wasm (plus a .data file when the sketch has assets). Open the .html over a local web server and the sketch runs.

Dropping it into this site

This repository already has a helper that builds an example and copies the output into the site so the Playground serves it:

tools/build-wasm.sh ../umfeld/umfeld-examples/Basics/3D-primitives
# then set `wasm_demo: true` at the top of playground.html, commit & push

What to keep in mind

Assets — files your sketch loads (data/…) must be bundled at build time; Emscripten packs them into the .data file alongside the .wasm.
Same code — settings() / setup() / draw() and the whole API behave as on the desktop; you are shipping the identical application.cpp.
Serve, don’t double-click — browsers won’t load .wasm from a file:// path. Use any static server (or the Playground page).

Full background lives in the Umfeld × WebAssembly guide.