Learn HYPERAPP with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.