Hyperapp is a 1KB JavaScript library for building front-end web applications. It has a functional design and combines state management with a VDOM engine, with no dependencies. Parcel is a fast, zero configuration web application bundler.

Let’s start using them together.

Recipe 🥗🍴

Install Parcel.

npm i -g parcel-bundler

Create a working directory and a package.json file.

mkdir my-hyperapp-test

cd my-hyperapp-test

npm init

Install Hyperapp, Babel and JSX packages.

npm i hyperapp jsx-transform babel-preset-env

npm i babel-plugin-transform-react-jsx

Create a .babelrc file.

{

"presets": ["env"],

"plugins": [["transform-react-jsx", { "pragma": "h" }]] }

Create a app.jsx file.

import { h, app } from "hyperapp";



const state = { name: "world" };



const actions = {

refresh: () => state => ({

name: ["Jane", "John"][+(Math.random() < .5)]

})

};



const view = (state, actions) => (

<main>

<h1>Hello {state.name}</h1>

<button onclick={actions.refresh}>Refresh</button>

</main>

);



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

Then create a index.html file.

<html><body><script src="./app.jsx"></script></body></html>

Then, run Parcel.

parcel index.html

Open your browser, go to http://localhost:1234, it works!

Now, you can build something for real.