Model–View–Update

The Component API adheres to the Elm MVU (model–view–update) interface. It is similar to a left fold over actions: the model is updated by update and rendered by view.

actions:   Add ─▶ Add ─▶ Subtract ─▶ ...
            │       │        │
update:   0 ──▶ 1 ──▶ 2 ──▶ 1 ──▶ ...
            │       │        │
view:     ▢       ▢        ▢          (virtual DOM, diffed & patched)

• model — any user-defined type. An Eq instance is required (we recommend the derived one): miso only redraws when the model actually changed.
• view — the templating function that constructs a new virtual DOM (or HTML when rendering on the server). It is pure: context -> props -> model -> View.
• update — describes how the model evolves in response to actions raised by the application. It takes any action, updates the model and optionally schedules IO.

Why it works#

Because view is a pure function of state, there is exactly one place where state changes (update) and one place where the UI is described (view). Effects never run inside update — they are scheduled and their results come back as new actions, so the fold never observes partial state. This is what makes miso applications easy to reason about, easy to test and trivial to prerender.

Continue with Components to see how many small MVU loops compose into an application, or read Thinking in miso for a guided walkthrough.