Popularity
8.8
Stable
Activity
8.3
Growing
18,425
337
815

Description

HyperApp is a JavaScript library for building frontend applications.

Declarative: HyperApp's design is based on the Elm Architecture. Create scalable browser-based applications using a functional paradigm. The twist is you don't have to learn a new language.

Stateless components: Build complex user interfaces from micro-components. Stateless components are framework agnostic, reusable, predictable and easier to debug.

Batteries-included: Out of the box, HyperApp has Elm-like state management, a virtual DOM engine and a router; it still weighs 1kb and has no dependencies. We're not opinionated about your stack either; use Browserify with Hyperx; Webpack or Rollup with Babel/JSX, etc.

Code Quality Rank: L4
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Latest version: v2.0.8

hyperapp alternatives and similar libraries

Based on the "MVC Frameworks and Libraries" category.
Alternatively, view hyperapp alternatives based on common mentions on social networks and blogs.

Do you think we are missing an alternative of hyperapp or a related project?

Add another 'MVC Frameworks and Libraries' Library

README

Hyperapp

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 using idiomatic 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. 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

Ready to dive in? Learn the basics in the [Tutorial](docs/tutorial.md), check out the Examples, or visit the [Reference](docs/reference.md) for more detail.

To access Web Platform APIs (like fetch or addEventListener) in a way that makes sense for Hyperapp, learn how to create your own effects and subscriptions. For everything else, from third-party packages to real-world examples, browse the Hyperawesome collection.

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 love Hyperapp, becoming a contributor or sponsoring is the best way to give back. Thank you to everyone who already contributed to Hyperapp!

License

[MIT](LICENSE.md)


*Note that all licence references and agreements mentioned in the hyperapp README section above are relevant to that project's source code only.