How to Build Reactive Declarative UI in Vanilla JavaScript

Post by my_throwaway23 » Mon, Jan 12, 2026, 1:46 PM UTC

    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 });

    const page = ({count}) =>
        main([
            h1(text(count)),
            button({ onclick: Subtract }, text("-")),
            button({ onclick: Add }, text("+")),
        ]);

    app({
        init: (count = 0) => ({ count }),
        view: page,
        node: document.getElementById("app"),
      })

Post by efortis » Mon, Jan 12, 2026, 1:52 PM UTC

my_throwaway23 wrote: post #13

efortis wrote: post #9

I'm experimenting with recreating the whole DOM tree like this: function render() { restoreFocus(() => document.body.replaceChildren(App())) } function App() { return ( createElement('div', { className: 'App' }, createElement('h1', null, 'Hello, World'))) } function createElement(tag, props, ...children) { const elem = document.createElement(tag) for (const [k, v] of Object.entries(props || {})) if (k === 'ref') v.el…

Looks an awful lot like https://github.com/jorgebucaran/hyperapp

Post by hu3 » Mon, Jan 12, 2026, 2:13 PM UTC

my_throwaway23 wrote: post #12

Have you heard of hyperapp? From the official [0][@hyperapp/html]: 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 }); const page = ({count}) => main([ h1(text(count)), button({ onclick: Subtract }, text("-")…

Post by Nekorosu » Tue, Jan 13, 2026, 4:09 PM UTC

Post by jfengel » Tue, Jan 13, 2026, 7:46 PM UTC

Zanfa wrote: post #11

xutopia wrote: post #2

For the life of me I don’t understand why people absolutely insist on using JavaScript to render HTML. Backend frameworks do HTmL just fine. DOM manipulations can be simplified to just a few actions: remove, Add, change. The other types of manipulations and interactive features can be sprinkles of JavaScript instead of hundreds of kilobytes of the stuff. HTMX, Hotwire/Turbo, LiveView are just so much saner to me.

> For the life of me I don’t understand why people absolutely insist on using JavaScript to render HTML. Backend frameworks do HTmL just fine. There’s an entire universe of front-end developers who don’t even know JavaScript. React is the only thing they’ve ever touched and they’re completely helpless without it.