hast-util-to-dom

hast-util-to-dom

Transform HAST to a DOM tree

Installation

yarn:

yarn add hast-util-to-dom

npm:

npm install hast-util-to-dom

Usage

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

toDOM(node)

Transform a HAST Node to DOM Node.

License

ISC © Keith McKnight