Web
Compile to WebAssembly or JavaScript. Virtual DOM, event delegation, hydration and server-side rendering out of the box.
→🍜 A tasty Haskell UI framework 🍜
React meets Haskell.
miso is a small, fast Haskell library for building web and native user interfaces. It pairs Elm's model–view–update with React-style Components, and compiles to WebAssembly or JavaScript.
Copied
$
git clone https://github.com/haskell-miso/miso-sampler && cd miso-sampler$
nix develop .#wasm --command bash -c 'make all && make serve'Mobile
Ship native iOS, Android and HarmonyOS apps via LynxJS.org. See the native section.
→Coming soon
Desktop
Lynxtron brings Lynx to the desktop, Electron-style. The same miso components will run there unchanged.
→Your first miso application 🍜
A model, an update function and a view. That is a Component, and a whole application.
import Miso
( Component, Effect, View, component
, vfrag, text, startApp, defaultEvents
)
import Miso.Lens (this, (+=), (-=))
import Miso.String (ms)
import Miso.Html.Element (button_)
import Miso.Html.Event (onClick)
data Action = Add | Subtract
counter
:: Component context props Int Action
counter = component m u v
where
m :: Int
m = 0
u :: Action
-> Effect context props Int Action
u = \case
Add -> this += 1
Subtract -> this -= 1
v :: context
-> props
-> Int
-> View context Int Action
v _ _ n = vfrag
[ button_ [ onClick Subtract ] [ "−" ]
, text (ms n)
, button_ [ onClick Add ] [ "+" ]
]
main :: IO ()
main = startApp defaultEvents counterLive
0
What's in the box
miso borrows the best ideas from React and Elm and gives them Haskell types.
Virtual DOM
A keyed diffing algorithm patches only what changed. Fragments, keyed lists and lifecycle hooks included.
Components
Self-contained model, update and view. Nest them, pass props, share a global context, or send mail.
React API
Context, Fragments, Props and other familiar React concepts, implemented in Haskell.
HTML, SVG & CSS DSLs
Typed combinators for every HTML, SVG and MathML element, plus a structured CSS DSL with keyframes and media queries.
Event delegation
One listener on <body> routes capture and bubble phases through the virtual DOM to typed handlers.
Prerendering & hydration
Render a View to HTML on the server or at build time; the client hydrates instead of redrawing.
Type-safe routing
Derive a bidirectional router from a plain sum type. Links and parsers can never disagree.
Effects & subscriptions
IO is scheduled, never run, inside update. Timers, sockets and browser events are subscriptions.
WebSockets, SSE & Fetch
Typed access to the browser's networking: the Fetch API, WebSockets and server-sent events.
JavaScript EDSL
Talk to any browser API with a typed DSL or inline JavaScript quasi-quotes.
0-dependency
miso only depends on GHC boot packages that are delivered with the compiler distribution itself.
Native mobile
Build iOS, Android and HarmonyOS applications. See the native section.
Generative AI ready
Claude Fable generated this entire website. Every page, every interaction, 100% miso. Strong types, a pure view and a total update function give AI agents (and humans) tight feedback and maximum productivity: if it compiles, it usually works.
✦ Built by Claude Fable · 100% misoBatteries included 🔋
Games, browser API demos, integrations and libraries, all written in miso.