Mode:
Duration:
1
Coding works best on desktop or with an external keyboard.
Simple Counter - Hyperapp Typing CST Test
Simple Counter — Hyperapp Code
Basic counter with increment, decrement, reset, and theme toggle.
import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, isDark: false };
const actions = {
increment: () => s => ({ count: s.count + 1 }),
decrement: () => s => ({ count: s.count - 1 }),
reset: () => s => ({ count: 0 }),
toggleTheme: () => s => ({ isDark: !s.isDark })
};
const view = (s, a) => (
h('div', { class: s.isDark ? 'dark-theme' : 'light-theme' }, [
h('h2', {}, 'Counter: ' + s.count),
h('div', {}, [
h('button', { onclick: a.increment }, '+'),
h('button', { onclick: a.decrement }, '-'),
h('button', { onclick: a.reset }, 'Reset')
]),
h('button', { onclick: a.toggleTheme }, 'Switch to ' + (s.isDark ? 'Light' : 'Dark') + ' Theme')
])
);
app({ init: state, view, node: document.body, actions });Hyperapp Language Guide
Hyperapp is an ultra-lightweight (≈1 KB), functional JavaScript library for building user interfaces using a minimalist architecture of state, actions, and a virtual DOM. It emphasizes simplicity, purity, and predictable UI updates.
Primary Use Cases
- ▸Tiny SPAs or micro-frontends
- ▸Browser extensions
- ▸IoT dashboards
- ▸Static sites with light interactivity
- ▸Widgets or embeddable UI components
Notable Features
- ▸1 KB bundle size
- ▸Functional, Elm-like architecture
- ▸Pure actions for state updates
- ▸Minimal and efficient virtual DOM
- ▸Built-in global state and view system
Origin & Creator
Created by Jorge Bucaran in 2017 as a tiny yet expressive alternative to React and Elm, designed to be minimal and functional.
Industrial Note
Hyperapp is specialized for teams that want extremely small bundles, functional UI patterns, and codebases with minimal abstraction - perfect for microtools, PWAs, and embedded UIs.
Quick Explain
- ▸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.
Core Features
- ▸State management via pure functions
- ▸Virtual DOM rendering
- ▸Actions for updating state
- ▸Subscriptions for external effects
- ▸Component composition via functions
Learning Path
- ▸Learn Hyperapp state/actions
- ▸Understand VDOM and view functions
- ▸Learn subscriptions
- ▸Build reusable components
- ▸Explore community plugins
Practical Examples
- ▸Counters and toggles
- ▸Todo apps
- ▸Light dashboards
- ▸Landing pages with interactivity
- ▸Embedded widgets
Comparisons
- ▸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
Strengths
- ▸Extremely lightweight
- ▸Highly predictable architecture
- ▸Easy learning curve
- ▸Works without build tools
- ▸Ideal for embedded or performance-critical apps
Limitations
- ▸Smaller ecosystem than React/Vue
- ▸Minimal built-in tooling
- ▸No official router or complex ecosystem
- ▸Not ideal for huge enterprise applications
- ▸Requires comfort with functional programming
When NOT to Use
- ▸Large-scale enterprise applications
- ▸Teams requiring huge ecosystems
- ▸Apps needing SSR or hydration natively
- ▸Developers unfamiliar with functional patterns
- ▸Projects needing advanced routing or animations out-of-the-box
Cheat Sheet
- ▸`h()` - create VDOM nodes
- ▸`app()` - initialize app
- ▸Actions: `(state, data) => newState`
- ▸View: `(state) => h('div', {}, ...)`
- ▸Subscriptions: `[effect, data]`
FAQ
- ▸Is Hyperapp really only 1 KB?
- ▸Yes, production builds are extremely small.
- ▸Does Hyperapp use a virtual DOM?
- ▸Yes, a tiny and fast one.
- ▸Do I need a build tool?
- ▸No, but you can use one.
- ▸Is routing included?
- ▸No, use community routers.
- ▸Is Hyperapp beginner-friendly?
- ▸Yes - simple mental model and small API.
30-Day Skill Plan
- ▸Week 1: State & actions basics
- ▸Week 2: Components and VDOM patterns
- ▸Week 3: Subscriptions & effects
- ▸Week 4: Modular app architecture
- ▸Week 5: Bundling, performance, patterns
Final Summary
- ▸Hyperapp is a tiny, functional UI library for predictable web apps.
- ▸Ideal for microtools, widgets, and performance-critical interfaces.
- ▸Maintains Elm-like purity without heavy constraints.
- ▸Simple architecture of state, actions, and views.
- ▸Perfect for devs who want minimalism and clarity.
Project Structure
- ▸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
Monetization
- ▸Build lightweight SaaS widgets
- ▸Develop embeddable UI kits
- ▸IoT dashboards
- ▸Custom dev tools
- ▸Micro-app consulting
Productivity Tips
- ▸Use small pure components
- ▸Organize actions logically
- ▸Leverage subscriptions instead of loops
- ▸Compose UI declaratively
- ▸Avoid unnecessary libraries
Basic Concepts
- ▸The global state object
- ▸Pure actions modifying state
- ▸View function returning virtual DOM
- ▸Subscriptions for external events
- ▸Component functions (reusable UI)