Introducing Qyavix — a 155-byte DOM runtime

#webdev #frontend #javascript

I recently built a tiny experiment: a minimal DOM runtime that provides hooks-style state and re-rendering… in just 155 bytes. Yes — bytes, not kilobytes.

🌿 What is Qyavix?

Qyavix is an extremely small JavaScript runtime that provides:

A simple state hook (u)
A tiny render function (r)
Zero dependencies
No bundler required
Full DOM rendering
Only ~10 lines of code (minified to 155 bytes)

Ideal for micro-UIs, benchmarks, or experiments.

⚡ The entire runtime (155 bytes)

let h = [], i, R;
export const u = v => {
  let k = i++;
  return [h[k] ??= v, n => (h[k] = n?.call ? n(h[k]) : n, R())];
};
export const r = (C, e) => (R = () => { i = 0; e.replaceChildren(C()) }, R());

🧩 How it works

u() — state hook: creates state slots based on call order and triggers render when updated.

r() — render function: resets state index, calls your component, replaces DOM. No virtual DOM or diff.

🚀 Quick example

import { u, r } from "./Qyavix.js";

function App() {
  const [count, setCount] = u(0);
  const btn = document.createElement("button");
  btn.textContent = "Count: " + count;
  btn.onclick = () => setCount(c => c + 1);
  return btn;
}

r(App, document.getElementById("root"));