Learn HYPERAPP with Real Code Examples

Hyperapp uses a functional, Elm-inspired architecture.

It focuses on predictable state updates through pure actions.

Its virtual DOM implementation is extremely minimal yet efficient.

State management via pure functions

Virtual DOM rendering

Actions for updating state

Subscriptions for external effects

Component composition via functions

The global state object

Pure actions modifying state

View function returning virtual DOM

Subscriptions for external events

Component functions (reusable UI)

index.html - basic mount point

app.js - state, actions, and views

components/ - optional reusable UI pieces

store.js - centralized state (optional)

effects/ - subscriptions for events like timers

Define initial state

Write actions that update it

Write a view that renders DOM

Mount app via `app({})`

Iterate with small components

Beginner: counters and forms

Intermediate: components and actions

Advanced: subscriptions and effects

Expert: custom rendering patterns

Community: Hyperapp plugins or contributions

Lighter than React, Preact, and Vue

More functional than Svelte

Simpler than Elm with fewer constraints

More predictable than jQuery-based UIs

Better for micro-apps than Angular

2017 – Hyperapp 1.0 released

2018 – Virtual DOM improvements

2020 – Hyperapp 2 released with simplified API

2022 – Community growth and tooling maturation

2025 – Hyperapp used widely for microfrontends

VDOM: Lightweight representation of DOM

Action: Pure function updating state

Subscription: External side effects

Component: Reusable function returning VDOM

App(): Initializes state/action/view