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, using an unofficial port as well as an experimental jsaddle-wasm library under the hood.

• 2048
• xhr
• snake
• todomvc

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.

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

Then:

source ~/.ghc-wasm/env
npm install -g sass
cd frontend
./build.sh

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