🌱 zeed-dom

> A modern, lightweight, TypeScript virtual DOM for Node.js, browser, and static content generation.

---

- ⚡️ Fast: Efficient HTML parsing and serialization
- 🧩 JSX Compatible: Works seamlessly with JSX/TSX
- 🔍 CSS Selectors: Query with a subset of CSS selectors
- 🛠 Easy Manipulation: Chainable API, .handle() helper, and more
- 📝 HTML, XML, Markdown, Plaintext: Serialize to multiple formats
- 🧹 Pretty Print: Tidy up HTML with tidyDOM
- 🦾 TypeScript: Full typings, modern codebase
- 🔒 Safe HTML: Output sanitized HTML for user content

Note: This project does not aim for full browser DOM completeness, but covers most practical use cases for static content, SSR, and offline DOM manipulation.

---

🚀 Get Started

``sh
npm i zeed-dom
`

🔗 Related Projects

- zeed – Foundation library
- zerva – Event-driven server

> Used by TipTap in its html-package.

---

✨ Features

- Virtual DOM tree with VNode, VElement, VDocument, etc.
- HTML parsing and serialization
- XML output support
- CSS selector engine (subset)
- JSX/TSX support (see below)
- Safe HTML serialization (serializeSafeHTML)
- Markdown and plaintext serialization
- Manipulation helpers: .handle(), .replaceWith(), .remove(), etc.
- Works in Node.js, browser, and serverless
- Pretty print HTML (tidyDOM)
- TypeScript-first API

---

🛠 Usage Examples

$3

Drop in HTML, query, and change it. Returns HTML again. Great for post-processing:

`ts
import { handleHTML } from 'zeed-dom'

const newHTML = handleHTML(html, (document) => {
const img = document.querySelector('.img-wrapper img')
if (img)
img.setAttribute('title', img.getAttribute('src'))
})
`

$3

Take any HTML node or document and serialize it to another format:

- serializePlaintext(node): Readable and searchable plain text
- serializeMarkdown(node): Simple Markdown
- serializeSafeHTML(node) or safeHTML(htmlString): Allow only basic tags and attributes

$3

`js
import { h, xml } from 'zeed-dom'

const dom = h(
'ol',
{ class: 'projects' },
[
h('li', null, 'zeed ', h('img', { src: 'logo.png' })),
h('li', null, 'zeed-dom'),
]
)

console.log(dom.render())
//

1. zeed
2. zeed-dom

console.log(dom.render(xml))
//

1. zeed
2. zeed-dom

`jsx
import { h } from 'zeed-dom'

let dom = (


1. zeed


2. zeed-dom

`js
import { tidyDOM, vdom } from 'zeed-dom'

const dom = vdom('

JSX is supported out of the box. For TypeScript, add to your tsconfig.json:

`json
{
"compilerOptions": {
"jsx": "react",
"jsxFactory": "h"
}
}
`

Add this to your shims.d.ts:

`ts
// https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements
declare namespace JSX {
interface IntrinsicElements {
[elemName: string]: any
}
}
`

For ESBuild:

`js
{
jsxFactory: 'h'
}
`

Or as a CLI option: --jsx-factory=h

For browser DOM:

`js
const { hFactory } = require('zeed-dom')
export const h = hFactory({ document })
`

---

🧪 API Highlights

- vdom(htmlString): Parse HTML to virtual DOM
- tidyDOM(node): Pretty print/format DOM
- serializeSafeHTML(node): Output safe HTML
- serializeMarkdown(node): Output Markdown
- serializePlaintext(node): Output plain text
- handleHTML(html, fn): Manipulate HTML with a callback
- VElement, VNode, VDocument, etc.: Core classes
- .handle(selector, fn): Manipulate elements by selector
- .querySelector, .querySelectorAll: CSS selector queries
- .replaceWith(), .remove(), .setAttribute(), etc.: DOM-like methods

---

🚦 Performance

The parser is fast, as shown in htmlparser-benchmark

---

📝 Misc

- Use double underscore in JSX for namespaces: →
- Use CDATA helper for raw data: