stable-haskell miso wasm counter — live demo

A real miso 1.11 counter app, written in Haskell, compiled to WebAssembly by the stable-haskell wasm cross-compiler. The wasm module below was built by the miso-counter template and is loaded directly into your browser.

Live

What's running

Click + / - above — the wasm module updates an Int model, miso diffs the virtual DOM, and patches the real DOM directly above this line. Open the browser console for the [hs stdout] lines coming out of the Haskell program through browser_wasi_shim's ConsoleStdout.

This page loads myapp.wasm (~2.8 MB) and jsffi.mjs (~48 KB) from the same directory. Built end-to-end via ghcup install ghc wasm32-wasi-9.14.0.stable.1 + cabal 3.17.0.0.stable.0 + the same Main.hs you'll see if you download the template.

Source

• app/Main.hs — the miso component (component smart constructor, updateModel, viewModel)
• cabal.project — dual-compiler + miso 1.11 source-repo pin
• myapp.cabal — wasm reactor flags + ghc-experimental dep
• examples/miso-counter/ — browse all files

Build it yourself:

curl -L -o miso.tar.gz \
  https://stable-haskell.github.io/ghc/examples/stable-haskell-wasm-miso-counter.tar.gz
tar xf miso.tar.gz && cd stable-haskell-wasm-miso-counter
export PATH="$HOME/.ghcup/ghc/wasm32-wasi-9.14.0.stable.1/bin:$PATH"
make run-web   # http://localhost:8000 — identical UI to the one above

← back to the stable-haskell channel