Skip to main content
There are two paths to get started with miso: the sampler template (fastest) and the manual setup (full control). Both produce a working counter application.
The WebAssembly backend is the recommended compilation target for miso applications.

​
Path 1: Sampler template

The miso-sampler repository is a template that includes a sample counter application and build scripts for WebAssembly, JavaScript, and vanilla GHC. It requires Nix Flakes.
1

Install Nix

curl -L https://nixos.org/nix/install | sh
2

Enable flakes

echo 'experimental-features = nix-command flakes' >> ~/.config/nix/config.nix
3

Clone, build, and serve

git clone https://github.com/haskell-miso/miso-sampler && cd miso-sampler
nix develop .#wasm --command bash -c 'make && make serve'
This enters the WASM development shell, compiles the application, and starts a local HTTP server. Open the URL printed in your terminal to view the running app.
Use the miso binary cache to avoid rebuilding dependencies from source: cachix use haskell-miso-cachix

​
Path 2: Manual setup

If you prefer to create your project from scratch — or if you are not using Nix — follow these steps to build the counter application manually. You need three files: cabal.project, app.cabal, and Main.hs.
1

Install GHC and cabal

Install GHCup to get GHC and cabal. For new Haskell users, GHCup is the recommended approach.
curl --proto '=https' --tlsv1.2 -sSf https://get-ghcup.haskell.org | sh
Then follow the Installation guide to add the WASM or JavaScript backend compiler.
2

Create your project files

Create the following three files in a new directory:
packages:
  .

source-repository-package
  type: git
  location: https://github.com/dmjio/miso
  branch: master
3

Build the application

With the WASM backend installed and wasm32-wasi-cabal on your $PATH, run:
wasm32-wasi-cabal update
wasm32-wasi-cabal build --allow-newer
A .wasm binary is produced in the dist-newstyle/ directory. See the Installation guide for the complete steps to package and serve the WASM output in a browser.

​
Understanding the counter app

The counter application demonstrates the core miso architecture: Model-View-Update.
ComponentDescription
App Int ActionThe application type: model is Int, messages are Action
componentConstructs an App from an initial model, update function, and view function
updateModelA pure function that handles each Action and updates the model or runs effects
viewModelA pure function that renders the model as a virtual DOM tree
startAppBootstraps the application and starts the event loop
The #ifdef WASM block exports hs_start as a JavaScript symbol, which is required when compiling with the WebAssembly backend.

​
Next steps

Installation

Set up the WASM or JS backend compiler in detail

Architecture

Understand the Model-View-Update pattern

Hot reload

Set up live reload with ghciwatch and WASM browser mode

Examples

Explore real-world miso applications

Build docs developers (and LLMs) love

Get started for freeTalk to us