The tiny framework for creating hypertext applications.
- Do more with less—We have minimized the concepts you need to learn to get stuff done. 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 API that's easy to read and fun to write, Hyperapp is the best way to create purely functional, feature-rich, browser-based apps in JavaScript.
- Smaller than a favicon—1 kB, give or take. Hyperapp is an ultra-lightweight Virtual DOM, highly-optimized diff algorithm, and state management library obsessed with minimalism.
Here's the first example to get you started. You can try it live here.
<!DOCTYPE html>
<html lang="en">
<head>
<script type="module">
import { h, text, app } from "https://unpkg.com/hyperapp"
const Add = (state) => ({
...state,
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("My Todos")),
h("input", { type: "text", oninput: NewValue, value }),
h("button", { onclick: Add }, text("Add Todo")),
h("ul", {},
todos.map((todo) => h("li", {}, text(todo)))
),
]),
node: document.getElementById("app"),
})
</script>
</head>
<body>
<main id="app"></main>
</body>
</html>The app starts off with init where we set the initial state. The view returns a plain object representation of how we want the DOM to look (the virtual DOM) and Hyperapp takes care of modifying the real DOM to match this specification whenever the state changes. That's really all there is to it.
Ready to dive in? We recommend working through the tutorial first. For other docs, visit the API reference.
Install Hyperapp with npm or Yarn:
npm i hyperappThen with a module bundler like Rollup or Webpack import it in your application and get right down to business.
import { h, text, app } from "hyperapp"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, text, app } from "https://unpkg.com/hyperapp"
</script>These packages provide access to the Web Platform and aim to ensure that the APIs are exposed in a way that makes sense for Hyperapp and the underlying code is stable. We haven't covered everything yet, but we're getting there. If you believe a package should be in this table, let us know.
| Package | Version | About |
|---|---|---|
@hyperapp/dom |
 |
Time effects and subscriptions for Hyperapp |
@hyperapp/html |
 |
Write HTML using functions in Hyperapp |
@hyperapp/time |
|
Time effects and subscriptions for Hyperapp |
@hyperapp/http |
 |
Make HTTP requests in Hyperapp |
@hyperapp/events |
 |
Subscribe to event listeners: animation frames, keyboard, mouse, etc |
@hyperapp/random |
|
Time effects and subscriptions for Hyperapp |
Don't panic! If you've hit a stumbling block, hop on the Hyperapp Slack to get help, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll figure it out together.
Hyperapp is free and open source software. If you love Hyperapp, becoming a contributor or sponsoring is the best way to give back. Thank you to everyone who already contributed to Hyperapp!
