Justin Review 5

Hyperapp Visualizer, and Hypercanvas (name pending), ACID club

~ August 5, 2025 ~

This is the fifth issue of Justin Review.

It’s been a while, I haven’t written one of these in a few months since I’ve lost the habit. However, I wanted to pick it up again after Arjun told me he wanted to see another edition.

Today, I talk about Hypercanvas (name pending), Hyperapp Visualizer, Hyperapp itself, and ACID club.

Hypercanvas (name pending)

Link to a demo. The project I’m currently working on is called Hypercanvas (name pending). I’ve been working on it for a little over a month now and expect for it to take another few months before it can come into true fruition.

Some ideas behind Hypercanvas

  • Programs deserve a spatial aspect - by spatially orienting programs like in real life, we can compare, contrast, and better understand the behavior of a multitude of programs. Modern programming lives entirely in text files, and the way we interact with a program’s behavior is through CLI tools or running it in a confined GUI. Programmers deserve to have a greater area to explore their ideas, and a Figma-like infinite canvas helps spatially orient programs to better visualize their behavior.
  • Programs should be functional with serializable state - this enables programs to be easily tuned and inspected to understand their behavior. Think Chrome Devtools is to modifying static HTML/CSS as this tool would be to modifying the actual state of an dynamic program. Features such as time travel become trivial to implement with serializable state.
  • Programs should be visually composable - one program should be able to connect to another program and read/write to its state. These connections should be clearly visible and modifiable. This enables for a complex application to be built on simple components, and for every piece of that entire system to be interactive and comprehensible.

The current design of the application:

  • Canvas

    • The canvas contains many blocks
    • The canvas is able to pan and zoom the viewport

  • Block

    • A block contains a program instance
    • A block is draggable and resizable
    • A block can be copy/pasted
    • A block can be created by clicking on a button

  • Program Instance

    • A program instance is an instance of a Program Class
    • A program instance contains a state, which is a serializable javascript object

  • Program Class

    • A program class extends the abstract program class. Its implementation is in a javascript file
    • A program class contains a hyperapp program
    • A program class renders a view of its hyperapp program on its attached block

This project is inspired by projects such as Folk Computer, TLDraw, and Hyperapp.

The current status of this project is very much in-progress. I’m currently building the foundations of how programs should be rendered, created, and connected with each other.

Hyperapp Visualizer

Link to a demo of Hyperapp Visualizer.

I made a small tool that utilizes serializable state to enable time travel and in-app state manipulation, called Hyperapp Visualizer. It’s inspired by Elm Reactor. Hyperapp Visualizer has helped me debug issues on other projects I’ve worked on. I view it as “Chrome Devtools for your state”. I have not yet released the source code since I want to polish it a bit, but if you want to use it contact me.

Hyperapp

Hyperapp is a minimalist javascript framework for building hypertext applications.

I’ve been a big fan of it and have been using it exclusively for my personal projects over the past few months. I would say it as close as you can get to “vanilla js” for idiomatic reactive web interfaces.

The first reason I like it is its minimalist approach to developer ergonomics. It’s simply a single javascript file that you can easily copy (preferably vendor) into your codebase. Since it’s only a few hundred lines of code, it’s realistic to actually read the entire Hyperapp source and understand how it works. The documentation is well-written and simple, able to fit in just a couple markdown files.

The API also reflects this minimalist style. There only a few functions to remember, the main ones which is just the h() function to create a virtual node. Since everything is “just javascript”, there’s no complexity in learning DSLs like JSX or Svelte templating and thus everything is very simply composable. Building off of that, there is no pre-processing or build step required. It’s a breath of fresh air compared to bloated React.

I’ve primarily used Hyperapp with JSDoc to enable static type-checking using just vanilla JS. I get all the IDE/LSP advantages of typescript with none of the bloated build steps/complexity that comes with it. Thankfully Hyperapp also comes with an optional index.d.ts file which provides great type definitions to use for this.

Basically 80% of Hyperapp is about passing state (simply a JS object) around your application, modifying it, and generating views for it. The other 20% is about effects (interacting with the outside world in a functional manner) and subscriptions(just effects but automatically triggered on every app state change).

Lastly the overall architecture promotes elegant and easy-to-reason-about applications. It is very functional, having been inspired by elm architecture. Since your application state is just a JS object it’s easy to serialize and manipulate.

ACID Club

Art craft interface-design club (ACID club) is a club based in Brooklyn, New York that hosts weekly hangouts and various design-related events.

The weekly hangs are very fun; it’s great to see the recurring group of ACID people. As of the time of writing, I think I have the record for most weekly hangs attended (besides the organizer). There is a range of people at these co-working sessions either talking with others or working on their own personal projects; I tend to gravitate towards focusing on my own personal project.

The events are great too and you can tell a lot of care was put into organizing them. Some of the standouts for me include the “Folk Tales” event (Omar and Andrés lore drop) and the tour of the Lubalin Archive (me in the first picture lol).

Currently the club is on a hiatus, having ended for the Summer season with an end-of-year party. This was a really fun event in which members of ACID club presented some projects they worked on during the year.

I presented Hyperimage again at this event (originally at screenshot conf). I created a Hyperimage presentation discussing Swedish figure skater Bror Meyer and his use of technology to express his craft and thought. This time, Hyperimage was in a more production-ready form as I deployed it as an actual website. I’m grateful for this opportunity to have shared my work, and was happy that it seemed to have positive feedback by others at the party. Currently Hyperimage is on pause, however I want to revisit it from a different perspective in the next few months.

One thing that sticks with me from the end-of-year party is Arjun’s point on community networks. I think it is an interesting reflection of ACID club.

creating awkward network shapes is so easy to do accidentally — hub-and-spoke dynamics where everyone connects through the host but not to each other, or inherited social graphs that create impenetrable in-groups.

Source

I really enjoy being a member of the club and would recommend it to anyone in NYC who is interested in any parts of the ACID acronym. Thanks to Arjun and Lucy for organizing this club. Visit the Instagram page if you are interested in joining.