2x

the tiny framework for building web interfaces

do more with less

We have minimized the concepts you need to learn to be productive. views, actions, effects, and subscriptions are all pretty easy to get to grips with and work together seamlessly.

write what, not how

With a declarative syntax that's easy to read and natural to write, Hyperapp is your tool of choice to develop purely functional, feature-rich, browser-based applications.

hypercharged

Hyperapp is a modern VDOM engine, state management solution, and application design pattern all-in-one. once you learn to use it, there'll be no end to what you can do.

quickstart

1․ Install Hyperapp with npm or Yarn:

npm i hyperapp

2․ Then with a module bundler like Parcel or Webpack import it in your application and get right down to business.

import { h, app } from "hyperapp"

3․ Don't want to set up a build step? Import Hyperapp in a <script> tag as a module. Don't worry; modules are supported in all evergreen, self-updating desktop, and mobile browsers.

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

Here's the first example to get you started: a counter that can go up or down. You can try it online here.

import { h, app } from "hyperapp"

app({
  init: 0,
  view: state =>
    h("div", {}, [
      h("h1", {}, state),
      h("button", { onclick: state => state - 1 }, "substract"),
      h("button", { onclick: state => state + 1 }, "add")
    ]),
  node: document.getElementById("app")
})

join us

We love to talk JavaScript and Hyperapp. If you've hit a stumbling block or got stuck, hop on the hyperapp slack to get help.