{"id":11069,"library":"hyperapp","title":"Hyperapp","description":"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.","status":"active","version":"2.0.22","language":"javascript","source_language":"en","source_url":"https://github.com/jorgebucaran/hyperapp","tags":["javascript","framework","hyperapp","frontend","vdom","web","app","ui","typescript"],"install":[{"cmd":"npm install hyperapp","lang":"bash","label":"npm"},{"cmd":"yarn add hyperapp","lang":"bash","label":"yarn"},{"cmd":"pnpm add hyperapp","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"Main entry point for initializing a Hyperapp application. ESM imports are standard since v2.0.0.","wrong":"const { app } = require('hyperapp')","symbol":"app","correct":"import { app } from 'hyperapp'"},{"note":"The hyperscript function for creating virtual DOM nodes. It's a named export.","wrong":"import h from 'hyperapp'","symbol":"h","correct":"import { h } from 'hyperapp'"},{"note":"Utility function for creating text virtual DOM nodes. Case-sensitive named export.","wrong":"import { Text } from 'hyperapp'","symbol":"text","correct":"import { text } from 'hyperapp'"}],"quickstart":{"code":"import { h, text, app } from \"hyperapp\";\n\ninterface State {\n  todos: string[];\n  value: string;\n}\n\nconst AddTodo = (state: State): State => ({\n  ...state,\n  value: \"\",\n  todos: state.todos.concat(state.value),\n});\n\nconst NewValue = (state: State, event: Event & { target: HTMLInputElement }): State => ({\n  ...state,\n  value: event.target.value,\n});\n\n// Ensure a root element exists in the DOM\nconst root = document.getElementById(\"app\") || document.createElement(\"main\");\nif (!document.getElementById(\"app\")) {\n  root.id = \"app\";\n  document.body.appendChild(root);\n}\n\napp<State>({\n  init: { todos: [], value: \"\" },\n  view: ({ todos, value }) =>\n    h(\"main\", {}, [\n      h(\"h1\", {}, text(\"To do list\")),\n      h(\"input\", { type: \"text\", oninput: NewValue, value }),\n      h(\n        \"ul\",\n        {},\n        todos.map((todo) => h(\"li\", {}, text(todo)))\n      ),\n      h(\"button\", { onclick: AddTodo }, text(\"New!\")),\n    ]),\n  node: root,\n});","lang":"typescript","description":"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."},"warnings":[{"fix":"Update any code directly accessing VNode properties from `vnode.name` to `vnode.nodeName` and `vnode.props` to `vnode.attributes`.","message":"Hyperapp 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.","severity":"breaking","affected_versions":">=1.1.0"},{"fix":"Migrate application initialization logic to use the `init` function within the main `app` configuration object, and define subscriptions and effects within this new structure. For v2.0.0+, the `init` property is part of the main config object.","message":"Hyperapp 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.","severity":"breaking","affected_versions":">=0.15.0 <2.0.0"},{"fix":"Refactor state management to align with the state slices approach and update event handlers to use direct DOM event methods. Remove any usage of mixins.","message":"Hyperapp 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.","severity":"breaking","affected_versions":">=0.14.0 <0.15.0"},{"fix":"Consult the v2.0.0 tutorial and reference documentation to adapt existing state, actions, and effects to the new API and lifecycle methods. Pay attention to how state is updated and how side effects are managed.","message":"Hyperapp 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.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Ensure your project is configured to use ES Modules, either by setting `\"type\": \"module\"` in your `package.json`, using a bundler (like Vite, Webpack, Rollup), or serving your scripts with `type=\"module\"` in HTML.","message":"Modern 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.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Use ES Module `import` syntax: `import { app, h, text } from 'hyperapp'`. Ensure your project's `package.json` has `\"type\": \"module\"` or your build setup correctly handles ESM.","cause":"Attempting to use CommonJS `require()` syntax to import Hyperapp in an ES Module context (e.g., modern browser, Node.js with `\"type\": \"module\"`).","error":"ReferenceError: require is not defined"},{"fix":"Update VNode property accessors in your code from `vnode.name` to `vnode.nodeName` and from `vnode.props` to `vnode.attributes`.","cause":"Accessing deprecated VNode property names (`name`, `props`) from Hyperapp v1.0.0 or earlier after upgrading to Hyperapp v1.1.0 or later.","error":"Property 'name' does not exist on type 'VNode' or 'Property 'props' does not exist on type 'VNode'"},{"fix":"Ensure the `app` function is called with a single configuration object containing `init`, `view`, and `node` properties, as required since Hyperapp v0.15.0 and refined in v2.0.0. Example: `app({ init: {}, view: () => h('div'), node: document.body })`.","cause":"Attempting to initialize the `app` function with an outdated signature, specifically prior to v0.15.0 which introduced the single configuration object, or if providing arguments in the v1.x `app(state, actions, view, node)` style to v2.x.","error":"TypeError: app expects a function as the first argument, not an object"}],"ecosystem":"npm"}