Popularity
8.8
Growing
Activity
8.1
Growing
18,102
366
801

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

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 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—no bundlers or compilers. Try it yourself.

<!-- prettier-ignore -->

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

      const AddTodo = (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("input", { type: "text", oninput: NewValue, value }),
            h("button", { onclick: AddTodo }, text("Add")),
            h("ul", {},
              todos.map((todo) => h("li", {}, text(todo)))
            ),
          ]),
        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](docs/tutorial.md) or visit the [API reference](docs/reference.md) for more documentation. If you prefer to learn by studying real-world examples, you can browse our awesome list of resources too.

Installation

Install Hyperapp with npm or Yarn:

npm i hyperapp

Then 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>

Packages

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](docs/reference.md) if something is not available yet.

Package Status About
@hyperapp/dom npm Manipulate the DOM, focus, blur, and measure elements.
@hyperapp/html npm Write HTML with plain functions.
@hyperapp/time npm Subscribe to intervals, get the time.
@hyperapp/http npm Talk to servers, make HTTP requests.
@hyperapp/events npm Subscribe animation frames, keyboard, mouse, window, and more.
@hyperapp/random npm Declarative random numbers and values.
@hyperapp/navigation npm Subscribe and manage the browser URL history.

Help, I'm stuck!

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.

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.