hyperapp

library2.0.22jsnpmunverified

Hyperapp is an ultra-lightweight JavaScript framework for building single-page applications, emphasizing minimalism and performance. It integrates state management and a Virtual DOM engine, all within a small footprint (around 1 KB gzipped) and without external dependencies. The current stable version is 2.0.22, with major versions introducing significant feature enhancements and API refinements, though a strict release cadence isn't explicitly stated beyond regular updates. Its key differentiators include its small bundle size, a declarative and purely functional API, and a focus on minimizing the concepts developers need to learn, encompassing views, actions, effects, and subscriptions. It offers a streamlined approach to building performant web applications with an optimized diffing algorithm for efficient DOM updates.

web-framework

github ↗package ↗homepage ↗

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Main entry point for initializing a Hyperapp application. ESM imports are standard since v2.0.0.

import { app } from 'hyperapp'

The hyperscript function for creating virtual DOM nodes. It's a named export.

import { h } from 'hyperapp'

Utility function for creating text virtual DOM nodes. Case-sensitive named export.

import { text } from 'hyperapp'

This quickstart demonstrates how to set up a simple to-do list application using Hyperapp, including state management, event handling, and rendering with `h` and `text` functions.

import { h, text, app } from "hyperapp"; interface State { todos: string[]; value: string; } const AddTodo = (state: State): State => ({ ...state, value: "", todos: state.todos.concat(state.value), }); const NewValue = (state: State, event: Event & { target: HTMLInputElement }): State => ({ ...state, value: event.target.value, }); // Ensure a root element exists in the DOM const root = document.getElementById("app") || document.createElement("main"); if (!document.getElementById("app")) { root.id = "app"; document.body.appendChild(root); } app<State>({ init: { todos: [], value: "" }, view: ({ todos, value }) => h("main", {}, [ h("h1", {}, text("To do list")), h("input", { type: "text", oninput: NewValue, value }), h( "ul", {}, todos.map((todo) => h("li", {}, text(todo))) ), h("button", { onclick: AddTodo }, text("New!")), ]), node: root, });

Debug

Known footguns

breakingHyperapp v1.1.0 introduced a breaking change to the internal VNode schema, renaming `name` to `nodeName` and `props` to `attributes` to align with Preact's virtual nodes. Direct access to these properties in custom VNode processing or component libraries will break.

breakingHyperapp v0.15.0 introduced the `init(state, actions)` function, which significantly changed how applications are initialized and how global events or subscriptions are handled, replacing older patterns.

breakingHyperapp v0.14.0 brought substantial breaking changes, including simplified state management with 'state slices', replaced events with direct DOM event handling, and removed mixins for code clarity. Code relying on previous event systems or mixins will cease to function.

breakingHyperapp v2.0.0 introduced new core features like Effects and Subscriptions, and an enhanced Dispatch mechanism. While adding capabilities, the overall architecture and how state/actions/effects interact became more structured, potentially requiring refactoring for existing v1.x applications.

gotchaModern Hyperapp (v2.0.0 and above) is primarily designed for ES Module (ESM) environments, as indicated by its documentation and examples using `import` statements. Attempting to use CommonJS `require()` syntax directly in a browser or non-transpiled Node.js environment will result in module resolution errors.

Upgrade

Version history

Breaking-change detection hasn't run for this library yet.

Audit

Security & dependencies

CVE tracking and dependency tree are planned for a later release.

Agent activity

0 hits · last 30 days

No traffic data recorded yet.

Resources

githubhttps://github.com/jorgebucaran/hyperapp ↗

packagehttps://www.npmjs.com/package/hyperapp ↗

homepagehttps://hyperapp.dev ↗