VanityH – Elegant Hyperscript DSL for Frontend Render Functions

I built VanityH to fix the pain of writing hyperscript in vanilla JS/TS, low‑code engines, and non‑JSX environments. It’s a tiny, zero‑dependency DSL built on Proxy & closure that turns messy nested h(tag, props, children) into clean, chainable code like SwiftUI/Flutter. Why it matters Escape nesting hell: Clear DOM structure at a glance Fully immutable: Copy‑on‑write, no accidental prop pollution Zero magic: Explicit, no hidden conversions Ultra‑light: ~600 bytes gzipped Works everywhere: Vue, React, Preact, Snabbdom, any hyperscript‑compatible renderer Example (Vue 3) import { h } from "vue"; import createVanity from "vanity-h"; const { div, button, h1 } = createVanity(h); const app = div.class("app").style("padding: 20px")( h1("VanityH Demo"), button.onClick(() => alert("Hello!"))("Click Me") ); Traditional vs VanityH // Before h("div", { class: "card" }, [h("button", { onClick: fn }, "Click")]); // After div.class("card")(button.onClick(fn)("Click")); Tech Proxy + closure fo