<h1 align="center">miso</h1> <p align="center"> <a href="https://haskell-miso.org"> <img width=10% src="https://em-content.zobj.net/thumbs/240/apple/325/steaming-bowl_1f35c.png"> </a> <p align="center">A <i>tasty</i> <a href="https://www.haskell.org/"><strong>Haskell</strong></a> web and <a href="https://github.com/haskell-miso/miso-lynx">mobile</a> framework 🍜</p> </p> <p align="center"> <a href="https://matrix.to/#/#haskell-miso:matrix.org"> <img src="https://img.shields.io/badge/matrix.org-miso-FF4B33.svg?style=for-the-badge" alt="Matrix #haskell-miso:matrix.org"> </a> <a href="https://www.npmjs.com/package/haskell-miso"> <img src="https://img.shields.io/npm/v/haskell-miso?style=for-the-badge" /> </a> <a href="https://haskell-miso-cachix.cachix.org"> <img src="https://img.shields.io/badge/build-cachix-yellow.svg?style=for-the-badge" alt="Cachix"> </a> <a href="https://actions-badge.atrox.dev/dmjio/miso/goto?ref=master"> <img alt="Build Status" src="https://img.shields.io/endpoint.svg?url=https%3A%2F%2Factions-badge.atrox.dev%2Fdmjio%2Fmiso%2Fbadge%3Fref%3Dmaster&style=for-the-badge" /> </a> <a href="http://hackage.haskell.org/package/miso"> <img src="https://img.shields.io/hackage/v/miso.svg?style=for-the-badge" alt="Hackage"> </a> </p>

Miso is a small, production-ready, component-oriented, reactive, isomorphic Haskell front-end framework for quickly building highly interactive single-page web and mobile applications. It features a virtual-dom, recursive diffing / patching algorithm, attribute and property normalization, event delegation, event batching, SVG, 2D/3D Canvas (WebGL), Server-sent events (SSE), Websockets, type-safe servant-style routing and an extensible Subscription-based subsystem. Inspired by Elm and React. Miso is pure by default, but side effects can be introduced into the system via the Effect data type.

Miso makes heavy use of the GHC Javascript FFI and therefore has minimal dependencies. Miso can be considered a shallow embedded domain-specific language for modern web programming.

Miso supports compilation to both JavaScript and WebAssembly using GHC. For hot-reload, miso uses WASM browser mode. When used with ghciwatch this enables a rapid development workflow.

[!IMPORTANT] Check out the new Haskell miso Organization 🍜

Table of Contents

• History
• Docs
• Quick Start
• Getting Started
• Setup
• Hot Reload
• Haddocks
• Wiki
• Architecture
• Examples
• Building examples
• HTTP
• Coverage
• Native
• Benchmarks
• Nix
  • Pinning nixpkgs
  • Binary cache
• Community
• Maintainers
• Commercial
• Contributing
• Contributors
• Partnerships
• Backers
• Organizations
• License

History 📜

miso is a play on the words micro and isomorphic.

miso began in 2016 as research in:

• Expressing the Elm architecture in GHCJS as an embedded domain-specific language.
• Implementing modern JavaScript frontend techniques as found in react (e.g. Reconciliation, isomorphic)

Miso aims to bridge the gap between modern JavaScript frameworks (such as React, Vue.js, etc.) and functional programming in Haskell. It has since grown to encompass more features from the JavaScript community like Components and Renderers. Miso also now supports native development for iOS, Android and HarmonyOS devices via LynxJS and targets additional backends like Web Assembly.

[!Note] React-style Components are now added to miso as of version 1.9. This has not yet been released, we recommend developing against master if you'd like to use latest features.

Docs 📚

See the Miso module.

Quick start ⚡

[!TIP] We have a template repository that includes a sample counter application and build scripts for all platforms.

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

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

# Clone, build and host
git clone https://github.com/haskell-miso/miso-sampler && cd miso-sampler
nix develop .#wasm --command bash -c 'make && make serve'

The fastest way to get started is to clone and build the miso sampler repository 🍱 This has build scripts for Web Assembly, JS and vanilla GHC. This requires Nix Flakes usage. See also the section on using miso's binary cache.

Getting started

To start developing applications with miso you will need to acquire GHC and cabal. This can be done via GHCup or Nix.

[!TIP] For new Haskell users we recommend using GHCup to acquire both GHC and cabal

Setup 🏗️

To develop and build your first miso application you will need 3 files:

• cabal.project
• app.cabal
• Main.hs

cabal.project

packages:
  .

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

app.cabal

We recommend using at least cabal-version: 2.2, this will give you the common sections feature which we will use later to allow multiple compilers to build our project (so we can target WASM and JS backends)

cabal-version: 2.2
name: app
version: 0.1.0.0
synopsis: Sample miso app
category: Web

common options
  if arch(wasm32)
    ghc-options:
      -no-hs-main
      -optl-mexec-model=reactor
      "-optl-Wl,--export=hs_start"
    cpp-options:
      -DWASM

  if arch(javascript)
     ld-options:
       -sEXPORTED_RUNTIME_METHODS=HEAP8

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

Main.hs

This file contains a simple miso counter application.

----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE LambdaCase        #-}
{-# LANGUAGE CPP               #-}
----------------------------------------------------------------------------
module Main where
----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html as H
import qualified Miso.Html.Property as P
import           Miso.Lens
----------------------------------------------------------------------------
-- | Sum type for App events
data Action
  = AddOne
  | SubtractOne
  | SayHelloWorld
  deriving (Show, Eq)
----------------------------------------------------------------------------
-- | Entry point for a miso application
main :: IO ()
main = startApp defaultEvents app
----------------------------------------------------------------------------
-- | WASM export, required when compiling w/ the WASM backend.
#ifdef WASM
foreign export javascript "hs_start" main :: IO ()
#endif
----------------------------------------------------------------------------
-- | `component` takes as arguments the initial model, update function, view function
app :: App Int Action
app = component 0 updateModel viewModel
----------------------------------------------------------------------------
-- | Updates model, optionally introduces side effects
updateModel :: Action -> Effect parent Int Action
updateModel = \case
  AddOne        -> this += 1
  SubtractOne   -> this -= 1
  SayHelloWorld -> io_ $ do
    alert "Hello World"
    consoleLog "Hello World"
----------------------------------------------------------------------------
-- | Constructs a virtual DOM from a model
viewModel :: Int -> View Int Action
viewModel x =
  H.di