DEV Community

Himavanta
Himavanta

Posted on

VanityH – Elegant Hyperscript DSL for Frontend Render Functions

#showdev #frontend #javascript #tooling

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")
);
Enter fullscreen mode Exit fullscreen mode

Traditional vs VanityH 

// Before
h("div", { class: "card" }, [h("button", { onClick: fn }, "Click")]);

// After
div.class("card")(button.onClick(fn)("Click"));
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)