@hyperapp/html

Write HTML with plain functions.

Stats

StarsIssuesVersionUpdatedCreatedSize
@hyperapp/html
18,65852.0.05 days ago4 years agoMinified + gzip package size for @hyperapp/html in KB

Readme

@hyperapp/html

Write HTML with plain functions.

Hyperapp's built-in h() function is intentionally primitive to give you the freedom to write views any way you like it. If you prefer a functional approach over templating solutions like JSX or template literals, here is a collection of functions—one for each HTML tag—to make your views faster to write and easier to read.

Here's the first example to get you started. Try it in your browser.

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

      const Subtract = (state) => ({ ...state, count: state.count - 1 })
      const Add = (state) => ({ ...state, count: state.count + 1 })

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

Looking for @hyperapp/svg instead?

Installation

npm install @hyperapp/html

Then with a module bundler like Rollup or Webpack import it in your application and get right down to business.

import { a, form, input } from "@hyperapp/html"

Don't want to set up a build step? Import it in a <script> tag as a module.

<script type="module">
  import { a, form, input } from "https://unpkg.com/@hyperapp/html?module"
</script>

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.