Guide · Open source

How to use Hyperapp: install, build a view and handle state

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Hyperapp is a small JavaScript library for building interactive web pages and apps. You describe what the page should look like from your current state, and Hyperapp updates the real page when that state changes. This guide shows you how to load it, write a view, handle user input with actions, and decide whether it fits your project.

Hyperapphyperapp/hyperapp · ★ 19.2k · MIT Install options & downloads

Quick start

1Check Node.js. If you plan to use npm, make sure Node.js is installed, since the README lists it as the prerequisite.
2Install the package. Run npm install hyperapp in your project folder to add Hyperapp.
3Or skip the build step. For a quick test, put the README's script tag example in an HTML file and open it in a browser.
4Define the initial state. Set the starting data for your app in the init property passed to app().
5Write the view. Use h() and text() to describe the elements that should appear for the current state.
6Add actions. Write functions that take the state and return a new state, and attach them to events such as oninput or onclick.
7Mount the app. Pass the element to render into as node, such as the element with id app.

How does Hyperapp work?

The app starts by setting the initial state and rendering the view on the page. User input flows into actions, whose function is to update the state, causing Hyperapp to re-render the view.

When describing how a page looks in Hyperapp, you don't write markup. Instead, you use h() and text() to create a lightweight representation of the DOM (a virtual DOM), and Hyperapp takes care of updating the real DOM efficiently.

State: the data your app holds, such as a list of to-do items.
View: a function that turns the current state into a description of the page.
Actions: functions that receive state and return a new state.
Effects and subscriptions: the README names these as part of the core concepts, and the reference documentation covers them.

Install Hyperapp with npm or load it in a script tag

If you use Node.js, install Hyperapp from npm. The README lists Node.js as the prerequisite for the npm install.

You can also skip the build step. The README's first example loads Hyperapp directly from a module script in the browser, so you can try it in a single HTML file.

Prerequisite for npm install: Node.js.
No build step is needed for the script tag example.

npm install hyperapp

Build a small interactive page

The README example is a to-do list. It has an input, a button and a list. The input's oninput action stores what the user types, and the button's onclick action adds that value to the list of todos.

The page is rendered into an element with the id app. Copy the example below into an HTML file and open it in a browser. The README's example uses the unpkg URL shown here.

init sets the starting state.
view receives the state and returns the elements to draw.
node tells Hyperapp which element on the page to render into.

<script type="module">
  import { h, text, app } from "https://unpkg.com/hyperapp"

  const AddTodo = (state) => ({
    ...state,
    value: "",
    todos: state.todos.concat(state.value),
  })

  const NewValue = (state, event) => ({
    ...state,
    value: event.target.value,
  })

  app({
    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: document.getElementById("app"),
  })
</script>

<main id="app"></main>

Learn the rest from the Tutorial and Reference

The README points to three resources: the Tutorial in docs/tutorial.md, the Examples collection on CodePen, and the Reference in docs/reference.md. Start with the Tutorial if you are new to the framework.

Official packages cover some browser features. The README lists @hyperapp/dom, @hyperapp/svg, @hyperapp/html, @hyperapp/time and @hyperapp/events as available, and @hyperapp/http, @hyperapp/random and @hyperapp/navigation as planned. For other packages and real-world examples, the README points to the Hyperawesome collection.

Tutorial: docs/tutorial.md
Reference: docs/reference.md
Examples: CodePen collection linked in the README
Third-party packages: Hyperawesome collection linked in the README

Get help when you are stuck

The README suggests joining the project's Discord server for help. If you are still stuck, it asks you to file an issue on the GitHub repository.

Ask in the Discord server linked in the README.
File an issue on the GitHub repository if the problem remains.

What people use it for

A to-do list that updates as the user types and adds items, as shown in the README example.
Simple interactive pages where the view should follow a single state object.
Browser experiments where you want to try a framework without setting up a build tool.
Small apps that use the planned or available official packages for DOM, SVG, HTML, time or events features.

Frequently asked questions

Is Hyperapp free to use?

Yes. The README lists the licence as MIT and describes Hyperapp as free and open-source software. Check the LICENSE.md file in the repository for the full terms.

What do I need to install Hyperapp?

To install it from npm, the README names Node.js as the prerequisite and gives the command npm install hyperapp. You can also load it directly in a script tag without a build step, as shown in the README example.

Can I use Hyperapp without a build tool?

Yes. The README says its first example needs no build step and loads Hyperapp from a module script in the browser. This makes it practical for trying the framework in a single HTML file.

How is Hyperapp different from React or Vue?

The README describes Hyperapp as a very small framework built around plain state, actions and a functional style. It does not compare itself to React, Vue, Preact or Svelte, so compare them directly for your own project's needs.

Does Hyperapp have a large library of ready-made components?

Not in the official project. The README lists several official packages as planned and points to the third-party Hyperawesome collection for other packages and examples. Teams that need a large ecosystem should weigh this carefully.

Where can I get help if my Hyperapp code does not work?

The README recommends the project's Discord server for help. If you remain stuck, you can file an issue on the GitHub repository and the maintainers say they will help you figure it out.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Hyperapp suits developers who want a very small, functional framework for simple to medium browser apps, especially those who want to start without a build tool. Pick something else if you need a large set of ready-made components or if you are not comfortable writing JavaScript.

Install options & downloads