The web runtime. A hand-rolled, no-Emscripten JavaScript host that renders WASI / Embedded-Swift wasm games on Canvas2D and fulfils the KitABI env imports in the browser.

Run a game in the browser as WebAssembly, without Emscripten. runtime.js drives the game loop, renders on Canvas2D (display-p3 wide color on supporting browsers, plus a hidden WebGL2 canvas for GLSL shader passes), mixes audio on the Web Audio API, handles input from DOM events and the Web Gamepad API, speaks via the Web Speech API, and persists state to localStorage. No watermarks. No loading screens. No third-party branding. Nothing injected between the game and the player.

Live demo: boss-man.us/play

WasmKit is the browser half of the SuperBox64 / Boss-Man game stack. Its runtime.js loads a wasm32-wasi (or Embedded Swift) reactor module, supplies the WASI Preview 1 syscalls the binary references, and implements the include/abi.h env contract on top of Canvas2D, Web Audio, the DOM, the Web Gamepad API, Web Speech, and localStorage.

The point of the constellation is one game source, many targets. A single SpriteKit codebase (see UFO-Emoji-Arcade) compiles three ways — Apple-native, full-Swift wasm, and Embedded-Swift wasm — and the same wasm a website serves with this runtime also:

• plays untouched in the WasmCart native console (SDL3 + WAMR), and
• runs as a single-file native binary via SuperBox64Kit's SDL3 backend.

runtime.js is the reference behavior that the native hosts re-implement. There is no Emscripten anywhere in the pipeline: the runtime hand-rolls the WASI Preview 1 syscalls and the entire env ABI itself.

The wasm modules WasmKit hosts are produced by SuperBox64Kit — a Swift reimplementation of Apple's SpriteKit (Box2D physics, an SDL3 backend, a reSVG/nanosvg vector rasterizer) that lets an existing SpriteKit game compile to wasm unchanged. WasmKit owns the browser side: it does not emulate SpriteKit; it answers the KitABI env imports those compiled games call. A header-only SFML 2.6 shim (include/SFML/) is also vendored here so existing C++ SFML games compile against the same ABI without an external SFML dependency.

 ONE game source (SpriteKit)
 UFO-Emoji-Arcade ── the flagship demo
 │
 ┌─────────────────┼──────────────────┐
 │ │ │
 Apple-native full-Swift wasm Embedded-Swift wasm
 (Xcode/Metal) wasm32-wasip1 wasm32 (~688 KB)
 │ │ │
 │ └────────┬─────────┘
 │ │ compiled by
 │ ┌────────┴─────────┐
 │ │ SuperBox64Kit │ THE KIT
 │ │ SpriteKit + KitABI
 │ │ Box2D · SDL3 · reSVG
 │ └────────┬─────────┘
 │ │ the .wasm cartridge
 ┌────────┴────────┐ ┌──────────────┼───────────────┬────────────────┐
 │ Apple │ │ │ │ │
 │ SpriteKit │ ╔═╧════════════╗ │ ┌───────┴──────┐ ┌───────┴───────┐
 │ Metal+UIKit │ ║ WasmKit ║ │ │ WasmCart │ │ Wasm5 │
 └─────────────────┘ ║ runtime.js ║ │ │ WAMR + AOT │ │ WKWebView │
 ║ Canvas2D ║◀┘ │ SDL3+Metal │ │ (this runtime│
 ║ (browser) ║ └──────────────┘ │ in a webview)│
 ╚══════════════╝ └───────────────┘
 YOU ARE HERE Wasm5 serves THIS runtime.js
 in a WKWebView over localhost

• No-Emscripten wasm loader. WebAssembly.instantiateStreaming with a fetch → arrayBuffer → instantiate fallback for servers that omit Content-Type: application/wasm. Supplies WASI Preview 1 imports: fd_write/fd_read/fd_close/fd_seek/fd_readdir, environ/args sizes+get, clock_time_get, random_get, proc_exit, poll_oneoff.
• Reactor contract. Instantiates a module exporting exactly _initialize, boot(), and frame(dtMs: f64) — works identically for C, C++, full-Swift, and Embedded-Swift reactors. Calls _initialize() then boot() after asset preload, then frame(dt) on every requestAnimationFrame.
• Canvas2D renderer (full env ABI). clear/save/restore/translate/scale/rotate, alpha, fill/stroke rect+circle+poly, textured-quad gfx_draw_image (src-crop + RGBA tint/alpha), per-target transform/blend save-restore stack, and offscreen render targets (rt_create/rt_image, gfx_offscreen_begin/end_to_image/discard).
• display-p3 wide color. Negotiates a display-p3 Canvas2D context where supported, emits color(display-p3 ...) CSS, and falls back to rgba() otherwise — no game-side changes needed.
• Text + emoji. Canvas2D fillText with txt_width measurement, gfx_draw_text letter-spacing, selectable textBaseline (alphabetic/middle/top/bottom), a DPR-aware glyph cache (cap 2048) for crisp+fast emoji, and a curated default-emoji set that appends U+FE0F so bare symbols (mountain, tent, ...) render in color, not B&W.
• Blend modes & effects. Mapped to globalCompositeOperation (add→lighter, multiply, screen, alpha→source-over), plus gfx_set_composite, gfx_set_filter/clear_filter, gfx_set_shadow/clear_shadow, gfx_draw_shadow_image, and RGB particle tint on both raster and SVG paths.
• Resolution-aware SVG. SVG assets are kept as live <img> and rasterized at draw time (loadSVG/drawSVG/svgRaster) with a quantized raster cache to avoid per-frame re-rasterization of scaling sprites. Raster images decode to ImageBitmap.
• WebGL2 GLSL effects. A hidden webgl2 canvas (premultipliedAlpha:false) backs gfx_shader_compile/release/set_uniform_f/set_uniform_t/draw, plus gfx_lighting_draw (normal-map lighting) and gfx_warp_draw (grid-mesh warp), blitted back into the 2D scene.
• Web Audio mixer. snd_by_name/from_samples/create_pcm (Float32 PCM for procedural music), snd_play (voice handles, volume, loop), snd_stop/set_volume/set_pan/set_rate/status, snd_pause_all/resume_all; plus an AVAudioEngine-shaped eng_* graph (player_create/release, mixer_create, node_set_volume/pan, connect, player_schedule_buffer/play/stop, eng_start/stop).
• Text-to-speech. Web Speech API tts_speak/cancel with rate/pitch/volume, preferred/robotic/female voice selection, speech priming, and audio ducking. TTS is disabled on iOS (Web Speech only fires in a user gesture there).
• Input. Keyboard (key_pressed against the SFML 2.6 keycode table), mouse (button/x/y in logical coords), multi-touch (TouchBegan/Moved/Ended in SFML 2.6 event order alongside finger-0 mouse), and an evt_poll event queue.
• Web Gamepad / USB arcade stick. Up to 4 pads on the W3C Standard layout: gp_connected/button/button_value/axis, plus gp_map_to_keys to synthesize arrow + Space key events so keyboard games "just work" on a controller.
• Asset preloader. Driven by manifest.json: fonts via FontFace (fetched as bytes so file:// works), images via ImageBitmap/SVG, sounds via AudioContext.decodeAudioData, JSON texts as strings exposed through asset_text. Each asset is registered under its full path, an assets/-prefixed path, and its bare basename.
• Cache-busting. CFG.cacheBust is appended as ?v=... to the wasm and every asset fetch to defeat stale browser caches.
• Collision polygons. img_polygon_from_alpha runs Ramer–Douglas–Peucker (rdpSimplify) alpha-outline tracing to hand the wasm a simplified collision polygon.
• Persistence & window control. store_get/store_set over localStorage; win_set_title/width/height/request_fullscreen/exit_fullscreen (with a pseudo-fullscreen fallback) and win_download via Blob + anchor.
• Lifecycle. Background tabs pause audio and the loop. A live FPS + draw-call + per-frame ms HUD overlay (img/txt/rest split, min/max/avg frame, glyph-cache + memory readout) is gated by SKView.showsFPS / showsDrawCount flags (off by default).
• Offline bundling. scripts/bundle.py produces a single local.html / bundle.js with every asset inlined as data: URLs, playable from file:///.

runtime-embedded-min.js is committed generated output. There is no minify script in this repo — build.sh only compiles C/C++ wasm; the Terser minify step lives in a consumer repo. Do not hand-edit the min file; regenerate it from the consumer's build. (A past ~334-line hand-fork drift caused a long missing-glyph-cache / white-hole / font symptom-chase.)

WasmKit is one host in a matrix where one game source runs across several build flavors and several hosts. The browser rows are the ones WasmKit owns (full table lives in SuperBox64Kit / UFO-Emoji-Arcade):

Copy shell.html, configure window.WASMWEB, and serve runtime.js next to it:

<!DOCTYPE html>
<html lang="en"><head>
 <meta charset="utf-8"/>
 <style>
 html,body{margin:0;background:#000;}
 /* canvas width/height and this aspect-ratio MUST match WASMWEB.logical*. */
 #game{width:100vw;aspect-ratio:1184/666;display:block;}
 </style>
</head><body>
 <canvas id="game" width="1184" height="666" tabindex="0"></canvas>
 <script>
 window.WASMWEB = {
 logicalWidth: 1184, // canvas backing store = fixed logical size
 logicalHeight: 666, // CSS scales it; mouse/touch arrive in logical px
 wasmUrl: 'game.wasm',
 assetRoot: 'assets',
 title: 'My Game',
 // cacheBust: Date.now() // stamped per build to defeat stale caches
 };
 </script>
 <script src="runtime.js"></script>
</body></html>

Serve over HTTP (the runtime auto-boots on DOMContentLoaded):

python3 -m http.server # then open the page

instantiateStreaming hard-requires Content-Type: application/wasm; the runtime falls back to fetch → arrayBuffer → instantiate for servers that don't send it.

From your game's own build script:

WASMWEB_OUT=web/game.wasm
WASMWEB_SRC_DIRS=(src)
WASMWEB_INCLUDES=(include)
WASMWEB_SFML=on # link the sf:: SFML 2.6 shim (off = raw ABI)
source ../WasmKit/build.sh
wasmweb_build

build.sh variables:

Under the hood wasmweb_build invokes (WASI SDK located via $WASI_SDK, default $HOME/wasi-sdk; it errors if $WASI_SDK/bin/clang++ is missing):

$WASI_SDK/bin/clang++ --target=wasm32-wasip1 \
 --sysroot=$WASI_SDK/share/wasi-sysroot \
 -mexec-model=reactor -std=c++20 -Os -fno-rtti -fno-exceptions \
 <defines> <includes> <srcs> \
 -Wl,--allow-undefined -Wl,-z,stack-size=8388608 -Wl,--strip-all \
 -Wl,--export=_initialize -Wl,--export=boot \
 -Wl,--export=frame -Wl,--export=memory \
 -o web/game.wasm

Regenerate manifest.json from an assets tree with wasmweb_manifest <assetsDir> <outFile>.

# example/build-test.sh — proves wasm<->JS imports/exports + Canvas2D RAF loop
$WASI_SDK/bin/clang++ --target=wasm32-wasi \
 --sysroot=$WASI_SDK/share/wasi-sysroot \
 -mexec-model=reactor -std=c++20 -O2 -fno-exceptions -fno-rtti \
 -Wl,--allow-undefined \
 -Wl,--export=boot -Wl,--export=frame -Wl,--export=key_event \
 -Wl,--export=__heap_base -Wl,--export=memory \
 example/web_main.cpp -o web/boss.wasm

Use SuperBox64Kit as a SwiftPM dependency, then build with the pinned wasm SDK. The output .wasm is served with this runtime exactly like a C++ game:

xcrun --toolchain swift swift build \
 --swift-sdk swift-6.3.2-RELEASE_wasm \
 -c release

The Swift + Box2D proof-of-concept (example/swift-poc/) links a native libcbox2d.a and exports boot/frame/_initialize via linker flags in Package.swift:

swift build # links native/libcbox2d.a

Note: example/swift-poc/Package.swift hardcodes an absolute, now-stale path to libcbox2d.a under .../BossMan/wasm-web-kit/... — it will not build as-is from this repo location.

# README form (explicit args):
python3 scripts/bundle.py web/game.wasm web/assets web/index.html local.html
# Actual bundle.py signature: WEB_DIR [WASM_FILENAME] [--asset-root ROOT]
python3 scripts/bundle.py web boss.wasm

Produces a single local.html / bundle.js with every asset inlined as a data: URL. Browsers fetch data: URLs from a file:// origin and honor the embedded MIME type — exactly what instantiateStreaming wants for the wasm module.

The wasm binary is a WASI Preview 1 (or Embedded Swift) reactor exporting exactly:

Everything else — drawing, audio, input, persistence — is imported from the env module.

1. Instantiate. runtime.js fetches the wasm, provides every env + WASI import, and calls _initialize.
2. Preload. manifest.json drives the asset pipeline: images decode to handles/ImageBitmap, audio decodes to Web Audio buffers, fonts register through FontFace (fetched as bytes, so file:// works too).
3. Boot. boot() runs once; the game builds its first scene.
4. Loop. Each requestAnimationFrame, gamepads are polled into the event queue, then frame(dt) runs. The wasm replies with a stream of gfx_* calls replayed onto Canvas2D — sprites and atlas sub-rects via drawImage, shapes/text natively, offscreen canvases for bake/crop/effect work, and a hidden WebGL2 canvas for gfx_shader_* GLSL effects blitted back into the 2D scene.
5. Audio plays on a Web Audio graph (snd_* voices; eng_* AVAudioEngine-shaped player/mixer graph; tts_* speech synthesis).
6. Input (keyboard, mouse, multi-touch, Web Gamepad) lands in a queue the wasm drains via evt_poll; visibility changes pause audio and the loop in background tabs.

The wasm calls a fixed set of import_module("env") functions (declared in include/abi.h). Colors are packed 0xRRGGBBAA uint32; coordinates are logical game pixels; image/font/sound handles are small ints minted by JS (0 = not loaded); a "target" is a draw surface handle (0 = the screen canvas; >0 = a render texture from rt_create).

runtime.js envImports(), not abi.h, is the real import surface. The runtime implements many more imports than the header documents — treat the header as the documented core and envImports() as authoritative.

Blend modes (gfx_set_blend): 0 alpha, 1 add, 2 multiply, 3 none. Text baseline (gfx_set_text_baseline): 0 alphabetic, 1 middle (true vertical centre — what SK .center means), 2 top, 3 bottom.

Gamepad buttons follow the W3C Standard layout: 0 A/South, 1 B/East, 2 X/West, 3 Y/North, 4 L1, 5 R1, 6 L2, 7 R2, 8 Select, 9 Start, 10 L3, 11 R3, 12–15 D-pad, 16 Home.

// Config object merged into CFG; runtime auto-boots on DOMContentLoaded.
window.WASMWEB = {
 logicalWidth, logicalHeight, // fixed canvas backing-store size
 wasmUrl, assetRoot, // wasm + asset paths (cache-busted via ?v=)
 canvasId, // default 'game'
 title,
 cacheBust, // appended as ?v=... to wasm + every asset
};
// On DOMContentLoaded the runtime does, effectively:
new Runtime(canvas).load(CFG.wasmUrl);

class Runtime (in runtime.js) public surface: load(url), preload(), discoverAssets(), wasiImports(), envImports(), wireInput(), pollGamepads(), layout(), plus internal helpers (drawFpsOverlay, _rasterizeText, loadSVG/drawSVG/svgRaster, ensureGL/buildShaderFrag, ensureAudio, ...).

On Safari, Chrome 104+, and WebKit-based WebViews the runtime negotiates a display-p3 Canvas2D context automatically. Colors passed through the ABI are emitted as color(display-p3 ...) CSS, producing more vivid output on wide-gamut displays, with an automatic rgba() fallback. No game-side changes needed.

• The same wasm runs everywhere. A web build (full-Swift or Embedded) is the exact artifact WasmCart loads through WAMR and AOT-compiles, and the artifact Wasm5 plays in a WKWebView. runtime.js is the reference behavior the native SDL3 backend re-implements.
• Logical-size discipline. The canvas backing store is the fixed logical size; CSS scales it, so mouse/touch events arrive already in logical pixels. shell.html warns: the canvas width/height and the CSS aspect-ratio must match WASMWEB.logical*.
• file:// playback relies on fonts/assets being fetched as bytes (not url()), because a FontFace url() loads outside window.fetch and is blocked on file://. The bundle.py fetch-shim depends on this too.
• Cache-busting is load-bearing. Without CFG.cacheBust, browsers serve stale runtime.js / *.wasm / assets by filename — the recurring "I fixed it but nothing changed" trap. The build is meant to stamp the token each time.

• Keyboard is polled through key_pressed against the SFML 2.6 keycode table. The JS key map and the C++ Window/Event.hpp enum must stay in lockstep with SFML 2.6's fixed values; only the keys the games use are mapped (everything else returns "not pressed"). Web builds key off DOM KeyboardEvent.code.
• Mouse reports button + x/y in logical coordinates. Multi-touch delivers TouchBegan/Moved/Ended in SFML 2.6 event order, with finger-0 mirrored onto the mouse.
• Gamepads / USB arcade sticks (up to 4) report through gp_*; gp_map_to_keys(1) synthesizes arrow + Space key events so keyboard-only games work on a controller.
• Wasm5 keyboard forwarding: because SDL keystrokes break when WebKit is linked, Wasm5 injects synthetic DOM KeyboardEvents (e.code) that this runtime.js listens for on window keydown/keyup.

• SuperBox64Kit — the kit. Drop-in SpriteKit reimplementation that compiles one game source to wasm; owns SpriteKit emulation, KitABI, Box2D physics, the SDL3 backend, and the reSVG vector rasterizer. Embedded-runtime tweaks land in this repo's runtime-embedded.js first.
• WasmCart — native console. Embedded-Swift + SDL3 shell that plays .wasm/.aot carts through WAMR (interpreter + wamrc AOT, ~1.6 MB, no browser). Its SDL3 backend mirrors this repo's runtime.js logic.
• Wasm5 — webview console. WasmCart's shell, but carts play the web build (this runtime) in a WKWebView, with SDL3 keystrokes forwarded as synthetic DOM KeyboardEvents.
• UFO-Emoji-Arcade — the flagship game/demo. One App Store SpriteKit codebase shipped natively, to the browser via this runtime, and to native consoles, all from the same unchanged sources.
• Boss-Man — reference full arcade game; abi.h is the "BOSS-MAN web platform ABI" and the ×ばつ666 CFG defaults are Boss-Man's. The live demo at boss-man.us/play ships runtime-embedded-min.js.

WasmKit, Copyright 2026 Todd Bruss. This product includes software developed by Todd Bruss.

Licensed under the Apache License 2.0 — see LICENSE and NOTICE. Apache 2.0 grants an explicit patent license and terminates it on patent litigation, protecting contributors and users from patent ambush.