Popularity
8.8
Growing
Activity
8.9
Declining
17,048
376
772

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.3

hyperapp alternatives and similar libraries

Based on the "MVC Frameworks and Libraries" category

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

Add another 'MVC Frameworks and Libraries' Library

README

Hyperapp npm

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.

To learn more, go to https://hyperapp.dev for documentation, guides, and examples.

Quickstart

Install Hyperapp with npm or Yarn:

npm i hyperapp

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"

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.

<!DOCTYPE html>
<html lang="en">
  <head>
    <script type="module">
      import { h, app } from "https://unpkg.com/hyperapp"

      app({
        init: 0,
        view: state =>
          h("main", {}, [
            h("h1", {}, state),
            h("button", { onClick: state => state - 1 }, "-"),
            h("button", { onClick: state => state + 1 }, "+")
          ]),
        node: document.getElementById("app")
      })
    </script>
  </head>
  <body>
    <main id="app"></main>
  </body>
</html>

The app starts off with init as the initial state. Our code doesn't explicitly maintain any state. Instead, we define actions to transform it and a view to visualize it. The view returns a plain object representation of the DOM known as a virtual DOM, and Hyperapp updates the real DOM to match it whenever the state changes.

Now it's your turn! Experiment with the code a bit. Spend some time thinking about how the view reacts to changes in the state. Can you add a button that resets the counter back to zero? Or how about multiple counters?

Help, I'm stuck!

We love to talk JavaScript and Hyperapp. If you've hit a stumbling block, hop on the Hyperapp Slack or drop by Spectrum to get support, and if you don't receive an answer, or if you remain stuck, please file an issue, and we'll try to help you out.

Is anything wrong, unclear, missing? Help us improve this page.

Stay in the loop

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.