Studying Hyperapp.js

Hyperapp + Parcel Tutorial

Following the tutorial explained in:

Major points:

  • Parcel: zero configuration as opposed to Webpack
  • Hyperapp: minimalist frontend framework
  • inspired by Elm architecture

v01: Basic Setup

Source code in

mkdir study_hyperparcel && cd $_ && npm init -y && npm i hyperapp parcel-bundler 

The original tutorial uses jsx. I don’t like jsx because of additional mental burden and no benefit over hyperscript as explained by Andre Staltz in

index.html is very basic:

    <script src="./index.js"></script>

index.js is very basic:

console.log('hello parcel')


"start": "parcel index.html",
"build": "parcel build index.html --public-url ./",

Run npm start

Open http://localhost:1234

The speed of bundling and running server is amazing in comparison to webpack.

❯ npm start

> study_hyperparcel@1.0.0 start /Users/mertnuhoglu/projects/study/js/ex/study_hyperparcel
> parcel index.html

Server running at http://localhost:1234
✨  Built in1.2s.

v02: Using Hyperscript in Frontend View

Source code in

mkdir study_hyperparcel02 && cd $_ && npm init -y && npm i hyperapp parcel-bundler 

index.html and package.json are the same.

cp ../study_hyperparcel/index.html .
cp ../study_hyperparcel/package.json .

Add hyperscript to index.js:

console.log('hello parcel')



 Tech    16 Mar, 2018

Any work (images, writings, presentations, ideas or whatever) which I own is always provided under
Creative Commons License Creative Commons Attribution-Share Alike 3.0 License

Mert Nuhoglu is a Trabzon-born programmer and data scientist.

You may also like...