Home

Awesome

Hyperapp

The tiny framework for building hypertext applications.

Here's the first example to get you started. Try it here—no build step required!

<!-- prettier-ignore -->
<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>

Check out more examples

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, we don't write markup. Instead, we use h() and text() to create a lightweight representation of the DOM (or virtual DOM for short), and Hyperapp takes care of updating the real DOM efficiently.

Installation

npm install hyperapp

Documentation

Learn the basics in the Tutorial, check out the Examples, or visit the Reference.

Packages

Official packages provide access to Web Platform APIs in a way that makes sense for Hyperapp. For third-party packages and real-world examples, browse the Hyperawesome collection.

PackageStatusAbout
@hyperapp/domnpmInspect the DOM, focus and blur.
@hyperapp/svgnpmDraw SVG with plain functions.
@hyperapp/htmlnpmWrite HTML with plain functions.
@hyperapp/timenpmSubscribe to intervals, get the time now.
@hyperapp/eventsnpmSubscribe to mouse, keyboard, window, and frame events.
@hyperapp/httpnpmTalk to servers, make HTTP requests (#1027).
@hyperapp/randomnpmDeclarative random numbers and values.
@hyperapp/navigationnpmSubscribe and manage the browser URL history.

Need to create your own effects and subscriptions? You can do that too.

Help, I'm stuck!

If you've hit a stumbling block, hop on our Discord server to get help, and if you remain stuck, please file an issue, and we'll help you figure it out.

Contributing

Hyperapp is free and open-source software. If you want to support Hyperapp, becoming a contributor or sponsoring is the best way to give back. Thank you to everyone who already contributed to Hyperapp! <3

License

MIT