# miso

> miso is a small, fast and composable Haskell library for building web and native user interfaces. Compiles to WebAssembly or JavaScript.

miso is a Haskell UI framework in the Elm / React tradition: an application is a tree of `Component`s, each a model, an `update` function and a `view` built from a virtual DOM. It runs in the browser (WebAssembly or JavaScript) and natively on iOS and Android through Lynx.

Each link below is a Markdown copy of a page on https://haskell-miso.org. All of the documentation in one file: https://haskell-miso.org/llms-full.txt

## Getting started

- [Introduction](https://haskell-miso.org/docs/introduction/index.html.md): What miso is, the problems it solves, and where its ideas come from.
- [Installation](https://haskell-miso.org/docs/installation/index.html.md): Get a WebAssembly (or JavaScript) toolchain with nix and build the sample application.
- [Your first Component](https://haskell-miso.org/docs/your-first-component/index.html.md): A counter: model, update, view — and how to run it with startApp or hydrate with miso.
- [Model–View–Update](https://haskell-miso.org/docs/model-view-update/index.html.md): The Elm architecture as miso implements it: a left fold over actions.

## Core concepts

- [The View DSL](https://haskell-miso.org/docs/view-dsl/index.html.md): The View type, element nodes, the smart constructors in Miso.Html.Element and element lifecycle hooks.
- [Components](https://haskell-miso.org/docs/components/index.html.md): The Component record, composition with (+>), keys and the mount / unmount lifecycle.
- [Text nodes](https://haskell-miso.org/docs/text/index.html.md): VText nodes — string literals, HTML encoding on the server and keyed text.
- [Fragments](https://haskell-miso.org/docs/fragments/index.html.md): VFrag — grouping siblings without a wrapper element, with keyed variants.
- [Keys](https://haskell-miso.org/docs/keys/index.html.md): What keys mean for diffing, identity and preserving DOM references across updates.
- [Events](https://haskell-miso.org/docs/events/index.html.md): Event delegation through \<body>, the Events map, defining handlers with on, and decoding events.
- [Attributes & properties](https://haskell-miso.org/docs/attributes/index.html.md): The Attribute type, the smart constructors, custom properties and the property-vs-attribute rule.
- [Effects](https://haskell-miso.org/docs/effects/index.html.md): The Effect monad: mutating the model, scheduling asynchronous and synchronous IO, and the Sink.
- [Context](https://haskell-miso.org/docs/context/index.html.md): The global context: one value shared by the whole component tree, read in view and update, changed with modifyContext.
- [Props](https://haskell-miso.org/docs/props/index.html.md): Read-only data passed from a parent to a child at mount time, with mountWithProps\_ and getProps.
- [Ambient accessors](https://haskell-miso.org/docs/ambient/index.html.md): VContext, VProps and VModel: read the context, props or model anywhere in a view with vcontext, vprops and vmodel.
- [Communication](https://haskell-miso.org/docs/communication/index.html.md): Four ways components exchange data: props, context, the asynchronous mailbox and PubSub.
- [Subscriptions](https://haskell-miso.org/docs/subscriptions/index.html.md): Long-running sources of actions: subs, startSub / stopSub and createSub.
- [State & lenses](https://haskell-miso.org/docs/state-and-lenses/index.html.md): Miso.Lens: the bundled lens library, MonadState operators and three ways to generate lenses.

## Platform

- [Routing](https://haskell-miso.org/docs/routing/index.html.md): Miso.Router: a reversible, type-safe client-side router derived from a sum type.
- [HTML & prerendering](https://haskell-miso.org/docs/html-and-prerendering/index.html.md): Rendering Views to HTML with ToHtml, static and dynamic prerendering, hydration with miso and hydrateModel.
- [JavaScript EDSL & FFI](https://haskell-miso.org/docs/javascript-edsl/index.html.md): Miso.DSL for jsaddle-style interop, marshalling with ToJSVal / FromJSVal, and the js quasi-quoter.
- [Canvas](https://haskell-miso.org/docs/canvas/index.html.md): 2D canvas support: the Canvas monad, embedding a canvas in the view, drawing commands and animation loops.
- [MisoString](https://haskell-miso.org/docs/misostring/index.html.md): miso's canonical string type: JSString on the client, Text on the server, and how to convert.
- [JSON](https://haskell-miso.org/docs/json/index.html.md): Miso.JSON: a microaeson-style JSON library specialised to MisoString, with generic ToJSON / FromJSON.
- [Styles](https://haskell-miso.org/docs/styles/index.html.md): Three ways to style: the Miso.CSS DSL, inline strings and external stylesheets.
- [Development & debugging](https://haskell-miso.org/docs/development/index.html.md): Dev-time styles and scripts, live reloading in the WASM browser GHCi, and the debug log levels.
- [Internals](https://haskell-miso.org/docs/internals/index.html.md): How the event queue, scheduler, Waiter, delegation and diffing fit together.

## Native (mobile)

- [miso native](https://haskell-miso.org/docs/native/overview/index.html.md): Target iOS and Android by driving the Lynx runtime with the same components you write for the web.
- [The dual-thread architecture](https://haskell-miso.org/docs/native/dual-thread/index.html.md): Lynx runs your app on a background thread and a main thread; here is how miso maps onto both.
- [Static mounting](https://haskell-miso.org/docs/native/static-mounting/index.html.md): Component constructors cross the thread boundary as static pointers: mountStatic, vcomp and VCompStatic.
- [Effects, subscriptions and threads](https://haskell-miso.org/docs/native/effects-and-threads/index.html.md): runOnBG / runOnMain dispatch an action to the thread that should handle it; subs run on both threads unless guarded.
- [Main-thread events](https://haskell-miso.org/docs/native/main-thread-events/index.html.md): Per-handler thread affinity: \*Main variants run synchronously on the MTS for gesture- and scroll-linked work.
- [Main-thread-local state](https://haskell-miso.org/docs/native/main-thread-state/index.html.md): MainThreadRef: an IORef for state that lives only on the MTS, paired with eachFrame for vsync-coalesced animation.
- [Platform APIs and thread restrictions](https://haskell-miso.org/docs/native/platform-apis/index.html.md): Native modules are BTS-only, main-thread element ops are MTS-only; guard with mts / bts.
- [A minimal native component](https://haskell-miso.org/docs/native/minimal-component/index.html.md): The counter, written against Miso.Native's element vocabulary.

## Thinking in miso

- [Thinking in miso](https://haskell-miso.org/docs/thinking/overview/index.html.md): A guided walk-through: from a mockup to a working application, the miso way.
- [Step 1: Design the model](https://haskell-miso.org/docs/thinking/model/index.html.md): Find the minimal representation of state; derive everything else in view.
- [Step 2: Views and components](https://haskell-miso.org/docs/thinking/components/index.html.md): Most of your UI should be plain view functions. Reach for a Component when a piece needs its own state, subs or lifecycle.
- [Step 3: Actions and update](https://haskell-miso.org/docs/thinking/update/index.html.md): Actions are the vocabulary of your UI. update folds them into the model and schedules IO at the edge.
- [Step 4: Connect the pieces and ship](https://haskell-miso.org/docs/thinking/data-flow/index.html.md): Props down, mail up, context around, PubSub sideways — then routing, prerendering and mobile.
- [miso vs. React](https://haskell-miso.org/docs/thinking/miso-vs-react/index.html.md): A translation guide for React developers: which hooks map onto which miso constructs, and which names are false friends.

## Examples

- [Examples](https://haskell-miso.org/examples/index.html.md): Real applications built with miso: games, browser API demos, integrations and libraries from the haskell-miso organisation.

## Blog

- [A tour of the new haskell-miso.org](https://haskell-miso.org/blog/a-tour-of-the-new-site/index.html.md): The site is rebuilt in miso itself: 41 pages of docs with live examples, a native section, 55 examples, full-text search and docs your AI tools can read.
- [New blog](https://haskell-miso.org/blog/new-blog/index.html.md): Welcome to the new home of haskell-miso.org. More blog posts coming soon.

## Optional

- [API reference (Haddock)](https://haddocks.haskell-miso.org/miso/Miso.html): Every module, type and function in miso.
- [miso on GitHub](https://github.com/dmjio/miso): Source code, issues and releases.
- [haskell-miso on GitHub](https://github.com/haskell-miso): The example applications, libraries and tooling.