Hyperapp — 1kB JavaScript Framework for Building Web Interfaces

Introduction

Hyperapp is a tiny JavaScript framework for building interactive web applications. At roughly 1kB minified and gzipped, it provides a virtual DOM, a pure functional state management model, and effects system without external dependencies. It draws inspiration from Elm's architecture while staying accessible to JavaScript developers.

What Hyperapp Does

• Renders declarative views using a lightweight virtual DOM diffing engine
• Manages state through pure functions that return new state on each action
• Handles side effects (HTTP, timers) via a declarative effects and subscriptions API
• Ships as a single ES module with zero dependencies
• Supports JSX or hyperscript h() for building view trees

Architecture Overview

Hyperapp follows The Elm Architecture: state is a plain value, actions are pure functions (state, payload) => newState, and the view is a function of state returning virtual DOM nodes. Effects are returned alongside new state as tuples, and the runtime dispatches them. Subscriptions let the app react to external events (timers, WebSocket messages). The virtual DOM diff is minimal, optimized for the framework's small scope.

Self-Hosting & Configuration

• Install via npm install hyperapp or use the CDN ESM import directly
• No build step required for basic usage with hyperscript syntax
• Add JSX support via Babel or TypeScript with a custom pragma set to h
• Bundle with any tool (Vite, esbuild, Rollup) for production builds
• No config files or CLI needed; the entire runtime is one import

Key Features

• Entire framework fits in approximately 1kB gzipped with no dependencies
• Pure functional actions make state changes predictable and easy to test
• Effects system declares side effects without impure code in actions
• Subscriptions manage ongoing event sources (intervals, event listeners) declaratively
• No framework lock-in since views are plain functions returning virtual DOM objects

Comparison with Similar Tools

• Preact — 3kB React-compatible; Hyperapp is smaller and uses its own architecture instead of hooks
• Alpine.js — Attribute-based for HTML sprinkles; Hyperapp is a full virtual DOM framework
• Mithril — Similar size but uses a class-based component model; Hyperapp is purely functional
• Svelte — Compiler-based with no runtime overhead; Hyperapp is a runtime micro-framework
• Solid — Fine-grained reactivity without virtual DOM; Hyperapp uses traditional VDOM diffing

FAQ

Q: Can Hyperapp scale to large applications? A: It works well for small to medium apps. For large apps, you manage complexity through action composition and module splitting rather than framework-provided patterns.

Q: Does Hyperapp support server-side rendering? A: The @hyperapp/render package can render Hyperapp views to HTML strings for SSR.

Q: Is there a router for Hyperapp? A: The @hyperapp/router package provides client-side routing, or you can use subscriptions to watch popstate events.

Q: How does testing work? A: Since actions are pure functions and views are plain functions, you can test them directly without rendering.

Sources

• https://github.com/jorgebucaran/hyperapp
• https://github.com/jorgebucaran/hyperapp/blob/main/docs/README.md