- zeed
![](\"logo.png\")
- zeed-dom
- zeed
- zeed-dom
- \n
- zeed \n
- zeed-dom \n
- zeed-dom - great DOM helper for static content
Hello World
')\ntidyDOM(dom)\nconsole.log(dom.render())\n// Output is pretty printed like:\n// \n// Hello World\n//
\n```\n\n---\n\n## โ๏ธ JSX Setup\n\nJSX is supported out of the box. For TypeScript, add to your `tsconfig.json`:\n\n```json\n{\n \"compilerOptions\": {\n \"jsx\": \"react\",\n \"jsxFactory\": \"h\"\n }\n}\n```\n\nAdd this to your `shims.d.ts`:\n\n```ts\n// https://www.typescriptlang.org/docs/handbook/jsx.html#intrinsic-elements\ndeclare namespace JSX {\n interface IntrinsicElements {\n [elemName: string]: any\n }\n}\n```\n\nFor ESBuild:\n\n```js\n{\n jsxFactory: 'h'\n}\n```\n\nOr as a CLI option: `--jsx-factory=h`\n\nFor browser DOM:\n\n```js\nconst { hFactory } = require('zeed-dom')\nexport const h = hFactory({ document })\n```\n\n---\n\n## ๐งช API Highlights\n\n- `vdom(htmlString)`: Parse HTML to virtual DOM\n- `tidyDOM(node)`: Pretty print/format DOM\n- `serializeSafeHTML(node)`: Output safe HTML\n- `serializeMarkdown(node)`: Output Markdown\n- `serializePlaintext(node)`: Output plain text\n- `handleHTML(html, fn)`: Manipulate HTML with a callback\n- `VElement`, `VNode`, `VDocument`, etc.: Core classes\n- `.handle(selector, fn)`: Manipulate elements by selector\n- `.querySelector`, `.querySelectorAll`: CSS selector queries\n- `.replaceWith()`, `.remove()`, `.setAttribute()`, etc.: DOM-like methods\n\n---\n\n## ๐ฆ Performance\n\nThe parser is fast, as shown in [htmlparser-benchmark](https://github.com/AndreasMadsen/htmlparser-benchmark/blob/master/stats.txt)\n\n---\n\n## ๐ Misc\n\n- Use double underscore in JSX for namespaces: `{CDATA(yourRawData)}
`\n- `style` attributes can be objects: `` โ ``\n- Works in Node.js, browser, and serverless\n- TypeScript-first, but works with plain JS too\n","readmeFilename":"README.md"}