miso: A tasty Haskell front-end framework

This is a package candidate release! Here you can preview how this package release will appear once published to the main package index (which can be accomplished via the 'maintain' link below). Please note that once a package has been published to the main package index it cannot be undone! Please consult the package uploading documentation for more information.

[maintain] [Publish]


Miso is a small "isomorphic" Haskell front-end framework featuring a virtual-dom, diffing / patching algorithm, event delegation, event batching, SVG, Server-sent events, Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm, Redux and Bobril. Miso is pure by default, but side effects (like XHR) can be introduced into the system via the Effect data type. Miso makes heavy use of the GHCJS FFI and therefore has minimal dependencies.

[Skip to Readme]


Change log None available
Dependencies aeson, base (<5), bytestring, containers, ghcjs-base, http-api-data, http-types, jsaddle-warp, lucid, miso, network-uri, QuickCheck, quickcheck-instances, scientific, servant, servant-lucid, text, transformers, unordered-containers, vector [details]
License BSD-3-Clause
Copyright Copyright (c) 2017-2018 David M. Johnson
Author David M. Johnson <djohnson.m@gmail.com>
Maintainer David M. Johnson <djohnson.m@gmail.com>
Category Web, Miso, Data Structures
Home page http://github.com/dmjio/miso
Bug tracker https://github.com/dmjio/miso/issues
Source repo head: git clone https://github.com/dmjio/miso.git
Uploaded by DavidJohnson at 2019-07-14T23:04:04Z


[Index] [Quick Jump]


Manual Flags


Compile with JSaddle

Automatic Flags

Builds Miso's examples


Builds Miso's tests


Use -f <flag> to enable a flag, or -f -<flag> to disable that flag. More info


Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees

Readme for miso-

[back to package description]


A tasty Haskell front-end framework

Miso Slack Hackage Haskell LICENSE Miso Hydra IRC #haskell-miso

Miso is a small "isomorphic" Haskell front-end framework for quickly building highly interactive single-page web applications. It features a virtual-dom, diffing / patching algorithm, attribute and property normalization, event delegation, event batching, SVG, Server-sent events, Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm, Redux and Bobril. Miso is pure by default, but side effects (like XHR) can be introduced into the system via the Effect data type. Miso makes heavy use of the GHCJS FFI and therefore has minimal dependencies. Miso can be considered a shallow embedded domain-specific language for modern web programming.

Table of Contents

Quick start

To get started quickly building applications, we recommend using the nix package manager with miso's binary cache provided by cachix. It is possible to use stack to build GHCJS projects, but support for procuring GHCJS has been removed as of stack 2.0. nix is used to procure a working version of GHCJS. If you're using cabal we assume you have obtained GHCJS by other means. All source code depicted below for the quick start app is available here.


To build the sample-app with nix, execute the commands below:

(optional) nix-env -iA cachix -f https://cachix.org/api/v1/install
(optional) cachix use haskell-miso
git clone https://github.com/dmjio/miso
cd miso/sample-app
open ./result/bin/app.jsexe/index.html

The above commands will add miso's binary cache to your nix installation (support for both Linux and OSX). nix-build will fetch the dependencies from miso's cache and build the sample application.


Nix is a more powerful option for building web applications with miso since it encompasses development workflow, configuration management, and deployment. The source code for haskell-miso.org is an example of this.

If unfamiliar with nix, we recommend @Gabriel439's "Nix and Haskell in production" guide.

To begin, make the following directory layout:

➜  mkdir app && touch app/{Main.hs,app.cabal,default.nix} && tree app
|-- Main.hs
|-- app.cabal
`-- default.nix

Add a cabal file

➜  cat app/*.cabal
name:                app
synopsis:            First miso app
category:            Web
build-type:          Simple
cabal-version:       >=1.10

executable app
  main-is:             Main.hs
  build-depends:       base, miso
  default-language:    Haskell2010

Write a default.nix (this will fetch a recent version of miso). miso will provide you with a working nixpkgs named pkgs. callCabal2nix will automatically produce a nix expression that builds your cabal file.

with (import (builtins.fetchTarball {
  url = "https://github.com/dmjio/miso/archive/b4c473f3ed6d6251ea7b8b489fc50076ac8d9b70.tar.gz";
  sha256 = "11rby2s0hxbl28a4fcwdm9lcbjfysv862xd6b9jy0rgl63dh51i3";
}) {});
with pkgs.haskell.packages;
ghcjs.callCabal2nix "app" ./. {}

Add the source from Sample Application to app/Main.hs

Build the project


Open the result

open ./result/bin/app.jsexe/index.html

For development with nix, it can be nice to have cabal present for building. This command will make it available in your PATH.

nix-env -iA cabal-install -f '<nixpkgs>'

To be put into a shell w/ GHCJS and all the dependencies for this project present, use nix-shell.

nix-shell -A env

To view the dependencies for your project, call ghcjs-pkg list when inside the shell.

nix-shell -A env --run 'ghcjs-pkg list'

To build the project with cabal after entering the nix-shell

nix-shell -A env --run 'cabal configure --ghcjs && cabal build`

For incremental development inside of the nix-shell we recommend using a tool like entr to automatically rebuild on file changes, or roll your own solution with inotify.

ag -l | entr 'cabal build'


For constructing client and server applications, we recommend using one cabal file with two executable sections, where the buildable attribute set is contingent on the compiler. An example of this layout is here. For more info on how to use stack with a client/server setup, see this link. For more information on how to use nix with a client/server setup, see the nix scripts for https://haskell-miso.org.







Miso Plane (Flappy Birds)






Canvas 2D



File Reader





Sample application

-- | Haskell language pragma
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE RecordWildCards #-}

-- | Haskell module declaration
module Main where

-- | Miso framework import
import Miso
import Miso.String

-- | Type synonym for an application model
type Model = Int

-- | Sum type for application events
data Action
  = AddOne
  | SubtractOne
  | NoOp
  | SayHelloWorld
  deriving (Show, Eq)

-- | Entry point for a miso application
main :: IO ()
main = startApp App {..}
    initialAction = SayHelloWorld -- initial action to be executed on application load
    model  = 0                    -- initial model
    update = updateModel          -- update function
    view   = viewModel            -- view function
    events = defaultEvents        -- default delegated events
    subs   = []                   -- empty subscription list
    mountPoint = Nothing          -- mount point for application (Nothing defaults to 'body')

-- | Updates model, optionally introduces side effects
updateModel :: Action -> Model -> Effect Action Model
updateModel AddOne m = noEff (m + 1)
updateModel SubtractOne m = noEff (m - 1)
updateModel NoOp m = noEff m
updateModel SayHelloWorld m = m <# do
  putStrLn "Hello World" >> pure NoOp

-- | Constructs a virtual DOM from a model
viewModel :: Model -> View Action
viewModel x = div_ [] [
   button_ [ onClick AddOne ] [ text "+" ]
 , text (ms x)
 , button_ [ onClick SubtractOne ] [ text "-" ]

Building examples

The easiest way to build the examples is with the nix package manager

git clone https://github.com/dmjio/miso && cd miso && nix-build -A miso-ghcjs

This will build all examples and documentation into a folder named result

➜  miso git:(master) ✗ tree -d ./result/bin
|-- canvas2d.jsexe
|-- compose-update.jsexe
|-- file-reader.jsexe
|-- mario.jsexe
|   `-- imgs
|-- mathml.jsexe
|-- router.jsexe
|-- simple.jsexe
|-- svg.jsexe
|-- tests.jsexe
|-- threejs.jsexe
|-- todo-mvc.jsexe
|-- websocket.jsexe
`-- xhr.jsexe

To see examples, we recommend hosting them with a webserver

cd result/bin/todo-mvc.jsexe && nix-shell -p python --run 'python -m SimpleHTTPServer'
Serving HTTP on port 8000 ...


The core algorithmic component of miso is diff.js. It is responsible for all DOM manipulation that occurs in a miso application and has 100% code coverage. Tests and coverage made possible using jsdom and jest.

To run the tests and build the coverage report:

cd miso/tests
npm i
npm run test
## Or by using `yarn` instead of `npm`:
# yarn
# yarn test


Isomorphic javascript is a technique for increased SEO, code-sharing and perceived page load times. It works in two parts. First, the server sends a pre-rendered HTML body to the client's browser. Second, after the client javascript application loads, the pointers of the pre-rendered DOM are copied into the virtual DOM, and the application proceeds as normal. All subsequent page navigation is handled locally by the client, avoiding full-page postbacks as necessary.

The miso function is used to perform the pointer-copying behavior client-side.

For more information on how miso handles isomorphic javascript, we recommend this tutorial.

Pinning nixpkgs

By default miso uses a known-to-work, pinned version of nixpkgs.

Binary cache

nix users on a Linux or OSX distro can take advantage of a binary cache for faster builds. To use the binary cache follow the instructions on https://haskell-miso.cachix.org/.

cachix use haskell-miso


According to benchmarks, miso is among the fastest functional programming web frameworks, second only to Elm.




Feel free to dive in! Open an issue or submit PRs.

See CONTRIBUTING for more info.


BSD3 © David Johnson