miso

Getting started

Introduction

miso is a library for building web and native user interface applications. It provides a React-like programming experience for a simple Haskell dialect that emphasises performance, purity, simplicity, extensibility and composability.

What miso addresses

miso covers the common areas of web development so that you can spend your time on your application:

  • DOM manipulation — miso uses a Virtual DOM with a diffing algorithm that is responsible for all DOM modification and Component lifecycle hooks.
  • Event delegation — all event listeners are attached to a top-level element (typically <body>). When raised, events are routed through the virtual DOM to Haskell handlers that change application state. Both the capture and bubble phases are virtualised.
  • Prerendering — the server delivers HTML before the JavaScript or WebAssembly bootstraps. Instead of an initial draw, the client populates the virtual DOM from the real DOM ("hydration"), which avoids a redraw and helps SEO. Miso.Html.Render renders on the server; miso hydrates on the client.
  • Components — a Component is a self-contained miso application bundling its state, the logic that updates it and a function that renders it. Components nest to arbitrary depth.
  • Custom renderers — the underlying DOM operations are abstracted so a different rendering engine can be plugged in. This is how miso targets mobile devices through Lynx.
  • Lifecycle hooks — mount and unmount on components, onCreated and onDestroyed on elements. Commonly used for component communication and third-party JavaScript integration.
  • State management — component model state is manipulated with Miso.Lens or Miso.State.
  • HTTP / cookies — Miso.Fetch wraps the Fetch API and Miso.Cookie the CookieStore API, each with an asynchronous callback-based Effect and a synchronous _-suffixed IO variant.

Architecture

  • React — miso implements a subset of the React architecture internals: components, lifecycle hooks, virtual DOM, event delegation, along with the Fragment, Props and Context API features.
  • Elm — miso also implements the Elm architecture (model–view–update) and the mailbox communication pattern.

Native (mobile)

Beyond the browser, miso targets native mobile devices by driving the Lynx runtime instead of the DOM. The same MVU model, Component API, event delegation and virtual-DOM diffing carry over unchanged — only the element vocabulary differs. The native backend is gated behind the native cabal flag; web and WASM builds are unaffected. See the native section for the dual-thread architecture.

Where to next