VanityH – Elegant Hyperscript DSL for Frontend Render Functions

Himavanta — Wed, 01 Apr 2026 13:50:15 +0000

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 for chainable config
Terminator‑style rendering
Full TypeScript inference
MIT license

Repo: https://github.com/VanityH/vanityh

Try it: StackBlitz playground linked in README.

Would love feedback: API ergonomics, edge cases, renderer support.

DEV Community: Himavanta

VanityH – Elegant Hyperscript DSL for Frontend Render Functions

Why it matters

Example (Vue 3)

Traditional vs VanityH

Tech