The tiny framework for building 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 build 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—look ma' no bundlers! Try it in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<main id="app"></main>
</body>
</html>Now that you have poked around the code a bit, you may have some questions. What is init and view, and how do they fit together? The app starts off with init, where we set the initial state. The view returns a plain object that represents how we want the DOM to look (the virtual DOM) and Hyperapp takes care of modifying the actual DOM to match this specification whenever the state changes. That's really all there is to it.
Ready to dive in? Learn the basics in the tutorial or visit the API reference for more documentation. If you prefer to learn by studying real-world examples, you can browse our awesome list of resources too.
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>Official packages provide access to The Web Platform, and ensure that the APIs are exposed in a way that makes sense for Hyperapp, and the underlying code is stable. We already cover a decent amount of features, but you can always create your own effects and subscriptions if something is not available yet.
| Package | Status | About |
|---|---|---|
@hyperapp/dom |
 |
Manipulate the DOM, focus, blur, and measure elements. |
@hyperapp/svg |
 |
Draw SVG with plain functions. |
@hyperapp/html |
 |
Write HTML with plain functions. |
@hyperapp/time |
 |
Subscribe to intervals, get the time. |
@hyperapp/http |
 |
Talk to servers, make HTTP requests. |
@hyperapp/events |
 |
Subscribe animation frames, keyboard, mouse, window, and more. |
@hyperapp/random |
|
Declarative random numbers and values. |
@hyperapp/navigation |
|
Subscribe and manage the browser URL history. |
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!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent