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 (