https://github.com/truewinter/domhb
A tiny, safe HTML builder for the DOM
https://github.com/truewinter/domhb
Last synced: 11 months ago
JSON representation
A tiny, safe HTML builder for the DOM
- Host: GitHub
- URL: https://github.com/truewinter/domhb
- Owner: TrueWinter
- License: mit
- Created: 2025-07-09T19:18:16.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-07-09T19:48:28.000Z (11 months ago)
- Last Synced: 2025-07-09T21:17:45.986Z (11 months ago)
- Language: TypeScript
- Size: 4.88 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# `domhb`: A tiny, safe HTML builder for the DOM
Build DOM elements without the `document.createElement()` boilerplate using declarative arrays. No frameworks, no state, just plain JavaScript.
## Installation
`domhb` is a client-side ESM-only library available from npm or a CDN.
### From npm
```
npm install domhb
```
```js
import hb from 'domhb';
```
### From CDN
```js
import hb from 'https://esm.run/domhb';
```
## Usage
```ts
import hb, { type DOMElement } from 'domhb';
const elem: DOMElement = [
'div',
{
className: 'btn'
},
[
['div'],
['button', {
style: {
backgroundColor: 'cyan'
},
dataset: {
theme: 'light'
},
disabled: true
}],
['p', {}, 'Paragraph']
]
];
// DOM Element
const domElem = hb(elem);
/*
Paragraph
*/
document.querySelector('#target').appendChild(domElem);
```
## Why?
I occasionally need to dynamically add elements to my websites that don't justify the overhead of a framework like React - there's no state and no reactivity, so React is overkill. Usually I'd use `document.createElement()` for this, but this approach very quickly becomes hard to manage. It's also hard to understand the structure of the elements from a glance. `domhb` offers a clean, declarative alternative for static or once-off DOM generation.