/hyperapp-demo

Primary LanguageJavaScript

Hyperapp

Travis CI Codecov npm Slack

Hyperapp is a JavaScript library for building web applications. And this is my first demo using it.

Examples

Here is the first example to get you started. You can try it online too.

import { h, app } from "hyperapp"

const state = {
  count: 0
}

const actions = {
  down: () => state => ({ count: state.count - 1 }),
  up: () => state => ({ count: state.count + 1 })
}

const view = (state, actions) => (
  <main>
    <h1>{state.count}</h1>
    <button onclick={actions.down}>-</button>
    <button onclick={actions.up}>+</button>
  </main>
)

const main = app(state, actions, view, document.body)

Installation

Install with npm or Yarn.

npm i hyperapp

Then with a module bundler like Rollup or Webpack, use as you would anything else.

import { h, app } from "hyperapp"

If you prefer not to use a build system, you can load Hyperapp from a CDN and it will be globally available through the window.hyperapp object.

<!doctype html>
<html>
<body>
  <script src="https://unpkg.com/hyperapp"></script>
  <script>

  const { h, app } = hyperapp

  </script>
</body>
</html>

We support all ES5-compliant browsers, including Internet Explorer 10 and above.

Community