unified

Project: syntax-tree/hast-util-to-dom

Package: hast-util-to-dom@3.0.0

  1. Dependencies: 0·Dependents: 2
  2. hast utility to transform to the DOM
  1. util 137
  2. utility 133
  3. unist 121
  4. html 112
  5. rehype 78
  6. hast 61
  7. hast-util 40
  8. dom 9

hast-util-to-dom

Build Coverage Downloads Size Sponsors Backers Chat

hast utility to transform to a DOM tree.

Install

This package is ESM only: Node 12+ is needed to use it and it must be imported instead of required.

npm:

npm install hast-util-to-dom

Use

This utility is intended for browser use!

import {toDom} from 'hast-util-to-dom';

const el = toDom({
  type: 'element',
  tagName: 'h1',
  properties: {},
  children: [{type: 'text', value: 'World!'}]
});

console.log(el);

This will create a DOM node like this:

<h1>World!</h1>

If you want a string of HTML, you have a few options:

// Outer HTML, eg. if you want an entire fragment
console.log(el.outerHTML);
// "<h1>World</h1>"

// Inner HTML, eg. if you have a wrapping element you don't need
console.log(el.innerHTML);
// "World"

// Full serialization, eg. when you want the whole document
console.log(new XMLSerializer().serializeToString(el));
// "<div xmlns="http://www.w3.org/1999/xhtml">World</div>"

Due to the nature of various browser implementations, you may notice cross-browser differences in the serialized output, especially with respect to whitespace or self-closing tags. Buddy, that’s the web!

API

This package exports the following identifiers: toDom. There is no default export.

toDom(node[, options])

Transform a hast tree to a DOM tree.

options
options.fragment

Whether a DOM fragment should be returned (default: false).

options.document

Document interface to use (default: globalThis.document).

options.namespace

namespace to use to create elements.

Security

Use of hast-util-to-dom can open you up to a cross-site scripting (XSS) attack if the hast tree is unsafe. Use hast-util-santize to make the hast tree safe.

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organization, or community you agree to abide by its terms.

License

ISC © Keith McKnight