https://github.com/vanityh/vanityh
VanityH – Elegant Hyperscript DSL for Frontend Render Functions
https://github.com/vanityh/vanityh
htm html hyperscript jsx tagged-template template-literals vanity-h virtual-dom
Last synced: 24 days ago
JSON representation
VanityH – Elegant Hyperscript DSL for Frontend Render Functions
- Host: GitHub
- URL: https://github.com/vanityh/vanityh
- Owner: VanityH
- Created: 2026-04-01T06:30:22.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2026-04-04T07:41:35.000Z (28 days ago)
- Last Synced: 2026-04-07T02:03:11.383Z (25 days ago)
- Topics: htm, html, hyperscript, jsx, tagged-template, template-literals, vanity-h, virtual-dom
- Language: TypeScript
- Homepage:
- Size: 129 KB
- Stars: 10
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Agents: AGENTS.md
Awesome Lists containing this project
README
VanityH
[简体中文](./README_zh.md)
### 🚀 VanityH: Make Hyperscript Elegant
**Say goodbye to nesting hell, embrace fluent development experience**
VanityH is not just another complex UI framework. It's a minimal **DSL (Domain-Specific Language) builder**. Using Proxy and closure logic, it transforms verbose `h(tag, props, children)` calls into a fluent, chainable syntax similar to **SwiftUI** or **Flutter**.
---
### 🎯 Core Problems VanityH Solves
In non-JSX environments (vanilla JS/TS, scripting tools, low-code engines), developers face these challenges:
- **Nesting Hell**: Traditional `h` functions require heavy object nesting, creating visual noise
- **Prop Mutation**: Component reuse often accidentally pollutes original definitions
- **Cognitive Load**: Properties, events, and child nodes are interleaved, making DOM structure hard to understand
- **Environment Dependencies**: JSX requires compilation setup, not suitable for lightweight use in native browser environments
**VanityH perfectly resolves these issues with "chainable configuration + terminator rendering" logic.**
---
### ✨ Why Choose VanityH?
#### 🎨 Structural Elegance
VanityH separates property configuration from node mounting syntax, creating perfect mapping between code structure and DOM structure.
```js
html.lang("en")(
head(
meta.charset("UTF-8")(),
link.rel("icon").type("image/svg+xml").href("/favicon.svg")(),
title("VanityH – Elegance Redefined"),
),
body(div.id("app")(), script.type("module").src("/src/main.ts")()),
);
```
#### 🔒 Fully Immutable Architecture
Based on **Copy-on-Write** philosophy, each property call produces a brand-new state snapshot.
```js
const baseBtn = button.class("btn");
const redBtn = baseBtn.style("color: red")("Red Button");
const blueBtn = baseBtn.style("color: blue")("Blue Button"); // baseBtn remains pure
```
#### 🔍 Zero Magic Design
Tools should not be smarter than developers. VanityH doesn't auto-handle booleans, no implicit conversions, fully transparent.
#### 📦 Ultra-Lightweight & Compatible
- **Size**: Just 186 bytes, ultra-minimal implementation
- **Compatibility**: Supports Vue, Preact, React, Snabbdom, and any hyperscript-compatible renderer
---
### 🚀 Quick Start
#### Installation
**NPM:**
```bash
npm install vanity-h
```
**CDN (No Build Step Required):**
```html
// Using esm.sh (recommended) or unpkg
import { render, h } from "https://esm.sh/preact";
import createVanity from "https://esm.sh/vanity-h";
// Alternative: https://unpkg.com/vanity-h
const { div, span } = createVanity(h);
// Create UI with VanityH
const app = () => div.class("app")(span("Hello World"));
// Render to DOM
render(app(), document.getElementById("app"));
```
#### Basic Usage (Vue 3)
```typescript
import { h } from "vue";
import createVanity from "vanity-h";
// Initialize and destructure needed tags
const { x, div, button, span, h1 } = createVanity(h);
// 2. Wrap custom components
import MyComp from "./MyComp.vue";
// Create UI
const app = div.class("app").style("padding: 20px")(
h1("VanityH Demo"),
x(MyComp).theme("dark").onClose(handleClose)(), // Use x wrapper
button.onClick(() => alert("Hello!"))("Click Me"),
span.style("color: blue")("Experience elegant chaining"),
);
```
#### Try it in Playground
Experience VanityH instantly in your browser:
[](https://stackblitz.com/edit/vitejs-vite-bujruupx)
#### Traditional vs VanityH Syntax
```js
// Traditional hyperscript
h(
"div",
{
class: "card",
style: "padding: 20px",
},
[
h(
"button",
{
class: "btn-primary",
onClick: handleClick,
},
"Click me",
),
],
);
// VanityH syntax
div.class("card").style("padding: 20px")(
button.class("btn-primary").onClick(handleClick)("Click me"),
);
```
---
### 🛠 Technical Implementation
VanityH internally uses JavaScript's **Proxy** to intercept `get` operations, combined with **recursive closures** to manage state:
- **Configuration Mode**: Accessing properties returns a new Proxy with internal closure holding accumulated `props` object
- **Execution Mode**: When Proxy is called as function, it submits `props` and `children` to the renderer
---
### 🔧 TypeScript Support
VanityH provides deeply optimized type inference:
```typescript
import createVanity, { type VanityH } from "vanity-h";
import { h, VNode } from "vue";
// Strongly typed
const v: VanityH = createVanity(h);
// Type checking
const element = v.div.class("test").id("app")("Content");
```
---
### 📊 Performance
- **Size**: 186 bytes (minified) / ~150 bytes (gzipped)
- **Zero Dependencies**: Pure JavaScript implementation
- **High Performance**: Proxy interception overhead is negligible
- **Memory Friendly**: Closure-based immutable design
---
### 🤝 Contributing
We welcome all forms of contributions!
#### Development Setup
```bash
git clone https://github.com/VanityH/vanityh.git
cd vanityh
npm install
npm run dev # Start development server
```
---
### 📄 License
MIT License © 2026 VanityH Team
**VanityH**: Make writing render functions a pleasure, not a pain.
---
### 🙏 Acknowledgments
Thanks to these projects for inspiring VanityH:
- [HTM](https://github.com/developit/htm) - JSX-like syntax in plain JavaScript
- [DLight](https://github.com/dlight-js/dlight) - DX-first UI rendering library
- [Hyperscript](https://github.com/hyperhype/hyperscript) - Create HTML with JavaScript
- [SwiftUI](https://developer.apple.com/swiftui) - Declarative UI framework
Special thanks to all developers contributing to the open source community!