Learn Hyperapp - 9 Code Examples & CST Typing Practice Test

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.

View all 9 Hyperapp code examples →

Hyperapp Simple Counter Hyperapp Counter with Step Hyperapp Counter with Max/Min Hyperapp Counter with Auto Increment Hyperapp Counter with Double Increment Hyperapp Counter with Even/Odd Indicator Hyperapp Counter with Max/Min and Step Hyperapp Counter with LocalStorage Hyperapp Counter with Color Themes

Learn HYPERAPP with Real Code Examples

Updated Nov 23, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Hyperapp Simple Counter

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 });

Basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

Hyperapp Counter with Step

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, step: 5, isDark: false };
const actions = {
    increment: () => s => ({ count: s.count + s.step }),
    decrement: () => s => ({ count: s.count - s.step }),
    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 }, '+ ' + s.step),
        h('button', { onclick: a.decrement }, '- ' + s.step),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Switch Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter increments/decrements by a custom step value.

Let’s Try →

Hyperapp Counter with Max/Min

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, min: 0, max: 10, isDark: false };
const actions = {
    increment: () => s => (s.count < s.max ? { count: s.count + 1 } : {}),
    decrement: () => s => (s.count > s.min ? { 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 }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter that respects maximum and minimum limits.

Let’s Try →

Hyperapp Counter with Auto Increment

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, isDark: false, auto: false };
const actions = {
    increment: () => s => ({ count: s.count + 1 }),
    decrement: () => s => ({ count: s.count - 1 }),
    reset: () => s => ({ count: 0 }),
    toggleTheme: () => s => ({ isDark: !s.isDark }),
    toggleAuto: () => s => {
        if (!s.auto) { s.timer = setInterval(() => actions.increment(), 1000); }
        else clearInterval(s.timer);
        return { auto: !s.auto };
    }
};
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.toggleAuto }, s.auto ? 'Stop Auto' : 'Start Auto')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter that automatically increments every second.

Let’s Try →

Hyperapp Counter with Double Increment

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, isDark: false };
const actions = {
    increment: () => s => ({ count: s.count + 1 }),
    doubleIncrement: () => s => ({ count: s.count + 2 }),
    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.doubleIncrement }, '++'),
        h('button', { onclick: a.decrement }, '-'),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter increments by 2 with a special button.

Let’s Try →

Hyperapp Counter with Even/Odd Indicator

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 + ' (' + (s.count % 2 === 0 ? 'Even' : 'Odd') + ')'),
        h('div', {}, [
        h('button', { onclick: a.increment }, '+'),
        h('button', { onclick: a.decrement }, '-'),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Displays whether the count is even or odd.

Let’s Try →

Hyperapp Counter with Max/Min and Step

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, step: 5, min: 0, max: 50, isDark: false };
const actions = {
    increment: () => s => (s.count + s.step <= s.max ? { count: s.count + s.step } : {}),
    decrement: () => s => (s.count - s.step >= s.min ? { count: s.count - s.step } : {}),
    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 }, '+ ' + s.step),
        h('button', { onclick: a.decrement }, '- ' + s.step),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter with custom step and limits.

Let’s Try →

Hyperapp Counter with LocalStorage

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: parseInt(localStorage.getItem('count')||0), isDark: false };
const actions = {
    increment: () => s => { const count = s.count + 1; localStorage.setItem('count', count); return { count }; },
    decrement: () => s => { const count = s.count - 1; localStorage.setItem('count', count); return { count }; },
    reset: () => s => { localStorage.setItem('count', 0); return { 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 }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter persists value in localStorage.

Let’s Try →

Hyperapp Counter with Color Themes

import { h, app } from 'https://unpkg.com/hyperapp?module';
const themes = ['light-theme','dark-theme','blue-theme'];
const state = { count: 0, current: 0, theme: themes[0] };
const actions = {
    increment: () => s => ({ count: s.count + 1 }),
    decrement: () => s => ({ count: s.count - 1 }),
    reset: () => s => ({ count: 0 }),
    toggleTheme: () => s => ({ current: (s.current+1)%themes.length, theme: themes[(s.current+1)%themes.length] })
};
const view = (s, a) => (
    h('div', { class: s.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 Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter cycles through multiple color themes.

Let’s Try →

Frequently Asked Questions about Hyperapp

What is Hyperapp?

What are the primary use cases for Hyperapp?

Tiny SPAs or micro-frontends. Browser extensions. IoT dashboards. Static sites with light interactivity. Widgets or embeddable UI components

What are the strengths of Hyperapp?

Extremely lightweight. Highly predictable architecture. Easy learning curve. Works without build tools. Ideal for embedded or performance-critical apps

What are the limitations of Hyperapp?

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

How can I practice Hyperapp typing speed?

CodeSpeedTest offers 9+ real Hyperapp code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Hyperapp Simple Counter

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 });

Basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

Hyperapp Counter with Step

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, step: 5, isDark: false };
const actions = {
    increment: () => s => ({ count: s.count + s.step }),
    decrement: () => s => ({ count: s.count - s.step }),
    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 }, '+ ' + s.step),
        h('button', { onclick: a.decrement }, '- ' + s.step),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Switch Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter increments/decrements by a custom step value.

Let’s Try →

Hyperapp Counter with Max/Min

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, min: 0, max: 10, isDark: false };
const actions = {
    increment: () => s => (s.count < s.max ? { count: s.count + 1 } : {}),
    decrement: () => s => (s.count > s.min ? { 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 }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter that respects maximum and minimum limits.

Let’s Try →

Hyperapp Counter with Auto Increment

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, isDark: false, auto: false };
const actions = {
    increment: () => s => ({ count: s.count + 1 }),
    decrement: () => s => ({ count: s.count - 1 }),
    reset: () => s => ({ count: 0 }),
    toggleTheme: () => s => ({ isDark: !s.isDark }),
    toggleAuto: () => s => {
        if (!s.auto) { s.timer = setInterval(() => actions.increment(), 1000); }
        else clearInterval(s.timer);
        return { auto: !s.auto };
    }
};
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.toggleAuto }, s.auto ? 'Stop Auto' : 'Start Auto')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter that automatically increments every second.

Let’s Try →

Hyperapp Counter with Double Increment

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, isDark: false };
const actions = {
    increment: () => s => ({ count: s.count + 1 }),
    doubleIncrement: () => s => ({ count: s.count + 2 }),
    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.doubleIncrement }, '++'),
        h('button', { onclick: a.decrement }, '-'),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter increments by 2 with a special button.

Let’s Try →

Hyperapp Counter with Even/Odd Indicator

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 + ' (' + (s.count % 2 === 0 ? 'Even' : 'Odd') + ')'),
        h('div', {}, [
        h('button', { onclick: a.increment }, '+'),
        h('button', { onclick: a.decrement }, '-'),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Displays whether the count is even or odd.

Let’s Try →

Hyperapp Counter with Max/Min and Step

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: 0, step: 5, min: 0, max: 50, isDark: false };
const actions = {
    increment: () => s => (s.count + s.step <= s.max ? { count: s.count + s.step } : {}),
    decrement: () => s => (s.count - s.step >= s.min ? { count: s.count - s.step } : {}),
    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 }, '+ ' + s.step),
        h('button', { onclick: a.decrement }, '- ' + s.step),
        h('button', { onclick: a.reset }, 'Reset')
        ]),
        h('button', { onclick: a.toggleTheme }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter with custom step and limits.

Let’s Try →

Hyperapp Counter with LocalStorage

import { h, app } from 'https://unpkg.com/hyperapp?module';
const state = { count: parseInt(localStorage.getItem('count')||0), isDark: false };
const actions = {
    increment: () => s => { const count = s.count + 1; localStorage.setItem('count', count); return { count }; },
    decrement: () => s => { const count = s.count - 1; localStorage.setItem('count', count); return { count }; },
    reset: () => s => { localStorage.setItem('count', 0); return { 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 }, 'Toggle Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter persists value in localStorage.

Let’s Try →

Hyperapp Counter with Color Themes

import { h, app } from 'https://unpkg.com/hyperapp?module';
const themes = ['light-theme','dark-theme','blue-theme'];
const state = { count: 0, current: 0, theme: themes[0] };
const actions = {
    increment: () => s => ({ count: s.count + 1 }),
    decrement: () => s => ({ count: s.count - 1 }),
    reset: () => s => ({ count: 0 }),
    toggleTheme: () => s => ({ current: (s.current+1)%themes.length, theme: themes[(s.current+1)%themes.length] })
};
const view = (s, a) => (
    h('div', { class: s.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 Theme')
    ])
);
app({ init: state, view, node: document.body, actions });

Counter cycles through multiple color themes.

Let’s Try →

Frequently Asked Questions about Hyperapp

What is Hyperapp?

What are the primary use cases for Hyperapp?

Tiny SPAs or micro-frontends. Browser extensions. IoT dashboards. Static sites with light interactivity. Widgets or embeddable UI components

What are the strengths of Hyperapp?

Extremely lightweight. Highly predictable architecture. Easy learning curve. Works without build tools. Ideal for embedded or performance-critical apps

What are the limitations of Hyperapp?

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

How can I practice Hyperapp typing speed?

CodeSpeedTest offers 9+ real Hyperapp code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.