Skip to main content
Miso’s example ecosystem spans games, data-fetching, routing, 3D rendering, audio, video, and more. Every example is a standalone Haskell project that compiles to WebAssembly or JavaScript and is deployed at a public demo URL. Browsing the source code of these applications is one of the best ways to learn how to structure real miso projects.

TodoMVC

A classic TodoMVC implementation demonstrating CRUD, filtering, and local storage persistence.Source · Demo

Counter

The canonical hello-world miso app — a simple increment/decrement counter.Source · Demo

2048

A full clone of the 2048 sliding-tile puzzle game.Source · Demo

Flatris

A Tetris-like game built entirely in Haskell with miso.Source · Demo

Plane

A flappy-bird-style side-scroller game.Source · Demo

Snake

The classic Snake arcade game.Source · Demo

Space Invaders

A Space-Invaders-style shooter game.Source · Demo

Mario

Super Mario physics simulation.Source · Demo

SVG

Demonstrates SVG rendering with miso’s built-in SVG support.Source · Demo

Canvas 2D

2D Canvas rendering using miso’s canvas bindings.Source · Demo

Three.js

3D rendering powered by Three.js called from Haskell.Source · Demo

WebVR

WebVR/XR scenes using A-Frame from Haskell.Source · Demo

Fetch

Demonstrates AJAX requests using miso’s Fetch module.Source · Demo

WebSocket

Real-time bidirectional communication with WebSockets.Source · Demo

SSE

Server-sent events (SSE) integration.Source · Demo

Router

Client-side routing with type-safe servant-style routes.Source · Demo

File Reader

Reads local files from the browser using the FileReader API.Source · Demo

MathML

Mathematical notation rendered via MathML.Source · Demo

Audio

Browser audio playback and control.Source · Demo

Video

Browser video playback and control.Source · Demo

Reactivity

Reactive programming patterns in miso.Source · Demo

​
Building examples

The easiest way to build any example is with Nix. Each example repository contains a flake.nix that configures the full build environment.
1

Enable the binary cache

Use the miso cachix cache to avoid rebuilding dependencies from source:
cachix use haskell-miso-cachix
Skip this step and your first build may take a very long time — the cache provides pre-built GHC, miso, and all dependencies.
2

Clone an example repository

Pick any example from the table above and clone it. For example, to clone the counter (sampler) app:
git clone https://github.com/haskell-miso/miso-sampler
cd miso-sampler
3

Build and serve

Build for WASM and start a local server:
nix develop .#wasm --command bash -c 'make && make serve'
Open http://localhost:8080 in your browser.
See the Haskell Miso GitHub organization for the full list of example repositories and their individual build instructions.

Build docs developers (and LLMs) love

Get started for freeTalk to us