Notice

Thanks to miso community's active integration with the GHC wasm backend, the upstream miso library already builds fine with wasm, and the various official examples are based on wasm!

If you're looking into an example project of using miso with the GHC wasm backend, please check the official miso examples instead. This repo is now (thankfully) obsolete and therefore archived.

The original README contents are kept below for historical reference:

ghc-wasm-miso-examples

The GHC wasm backend supports the JSFFI feature, allowing Haskell wasm apps to interop with JavaScript seamlessly in the browser. This repo contains a few examples to demonstrate this ability, all of which based on the miso frontend framework as well as an experimental jsaddle-wasm library under the hood.

See also: ghc-wasm-reflex-examples

Live demo

• 2048
• xhr
• snake
• todomvc

Building

With nix

Within the nix develop shell:

cd frontend
wasm32-wasi-cabal update
./build.sh

If you pass additional arguments to build.sh, they will be redirected to wasm-opt, otherwise a dev build without wasm-opt will be performed.

The artifacts will be available in frontend/dist.

Without nix

You can set up the toolchain by either:

• Using ghc-wasm-meta directly to set up ghc head or ghc 9.10
• Using ghcup to set up ghc 9.10 (9.10.1.20241021 or later, with TemplateHaskell support) and cabal >=3.15.

Also install Sass.

Then:

source ~/.ghc-wasm/env
cd frontend
./build.sh

Acknowledgements

The examples are vendored and modified from the following projects:

• 2048: based on https://github.com/ptigwe/hs2048
• xhr: based on https://github.com/dmjio/miso/blob/master/examples/xhr/Main.hs
• snake: based on https://github.com/lbonn/miso-snake/blob/master/Main.hs
• todomvc: based on https://github.com/dmjio/miso/blob/master/examples/todo-mvc/Main.hs