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.

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