hast-util-to-html
Advanced tools
The hast-util-to-html package is a utility for converting HAST (Hypertext Abstract Syntax Tree) syntax trees to HTML strings. This is particularly useful in the context of unified.js ecosystem for processing HTML content, enabling developers to easily transform markdown or other formats into HTML after processing them through various plugins.
Convert HAST to HTML
This feature allows you to convert a HAST tree to an HTML string. The code sample demonstrates converting a simple paragraph element with text content into its HTML string representation.
const toHtml = require('hast-util-to-html');
const hast = {
type: 'element',
tagName: 'p',
properties: {},
children: [{type: 'text', value: 'Hello, world!'}]
};
console.log(toHtml(hast));Part of the rehype ecosystem, which is built on top of unified, rehype-stringify converts HAST to HTML. It is similar to hast-util-to-html but is typically used as a rehype plugin, offering a more integrated experience within the rehype ecosystem.
While not directly converting HAST to HTML, remark-html is a plugin for remark (a markdown processor) that allows markdown to be converted to HTML. It serves a similar end goal of transforming content into HTML, but it starts with markdown instead of HAST.
hast utility to serialize hast as HTML.
This package is a utility that turns a hast tree into a string of HTML.
You can use this utility when you want to get the serialized HTML that is represented by the syntax tree, either because you’re done with the syntax tree, or because you’re integrating with another tool that does not support syntax trees.
This utility has many options to configure how the HTML is serialized. These options help when building tools that make output pretty (such as formatters) or ugly (such as minifiers).
The utility hast-util-from-html does the inverse of
this utility.
It turns HTML into hast.
The rehype plugin rehype-stringify wraps this utility to
also serialize HTML at a higher-level (easier) abstraction.
This package is ESM only. In Node.js (version 16+), install with npm:
npm install hast-util-to-html
In Deno with esm.sh:
import {toHtml} from "https://esm.sh/hast-util-to-html@9"
In browsers with esm.sh:
<script type="module">
import {toHtml} from "https://esm.sh/hast-util-to-html@9?bundle"
</script>
npm install hastscript hast-util-to-html
import {h} from 'hastscript'
import {toHtml} from 'hast-util-to-html'
const tree = h('.alpha', [
'bravo ',
h('b', 'charlie'),
' delta ',
h('a.echo', {download: true}, 'foxtrot')
])
console.log(toHtml(tree))
Yields:
<div class="alpha">bravo <b>charlie</b> delta <a class="echo" download>foxtrot</a></div>
This package exports the identifier toHtml.
There is no default export.
toHtml(tree[, options])Serialize hast as HTML.
Serialized HTML (string).
CharacterReferencesHow to serialize character references (TypeScript type).
useNamedReferencesPrefer named character references (&) where possible (boolean, default:
false).
omitOptionalSemicolonsWhether to omit semicolons when possible (boolean, default: false).
⚠️ Note: this creates what HTML calls “parse errors” but is otherwise still valid HTML — don’t use this except when building a minifier. Omitting semicolons is possible for certain named and numeric references in some cases.
useShortestReferencesPrefer the shortest possible reference, if that results in less bytes
(boolean, default: false).
⚠️ Note:
useNamedReferencescan be omitted when usinguseShortestReferences.
OptionsConfiguration (TypeScript type).
allowDangerousCharactersDo not encode some characters which cause XSS vulnerabilities in older browsers
(boolean, default: false).
⚠️ Danger: only set this if you completely trust the content.
allowDangerousHtmlAllow raw nodes and insert them as raw HTML (boolean, default: false).
When false, Raw nodes are encoded.
⚠️ Danger: only set this if you completely trust the content.
allowParseErrorsDo not encode characters which cause parse errors (even though they work), to
save bytes (boolean, default: false).
Not used in the SVG space.
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
bogusCommentsUse “bogus comments” instead of comments to save byes: <?charlie> instead of
<!--charlie--> (boolean, default: false).
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
characterReferencesConfigure how to serialize character references
(CharacterReferences, optional).
closeEmptyElementsClose SVG elements without any content with slash (/) on the opening tag
instead of an end tag: <circle /> instead of <circle></circle> (boolean,
default: false).
See tightSelfClosing to control whether a space is used before the slash.
Not used in the HTML space.
closeSelfClosingClose self-closing nodes with an extra slash (/): <img /> instead of
<img> (boolean, default: false).
See tightSelfClosing to control whether a space is used before the slash.
Not used in the SVG space.
collapseEmptyAttributesCollapse empty attributes: get class instead of class="" (boolean,
default: false).
Not used in the SVG space.
👉 Note: boolean attributes (such as
hidden) are always collapsed.
omitOptionalTagsOmit optional opening and closing tags (boolean, default: false).
For example, in <ol><li>one</li><li>two</li></ol>, both </li> closing tags
can be omitted.
The first because it’s followed by another li, the last because it’s followed
by nothing.
Not used in the SVG space.
preferUnquotedLeave attributes unquoted if that results in less bytes (boolean, default:
false).
Not used in the SVG space.
quotePreferred quote to use (Quote, default: '"').
quoteSmartUse the other quote if that results in less bytes (boolean, default: false).
spaceWhich space the document is in (Space, default: 'html').
When an <svg> element is found in the HTML space, this package already
automatically switches to and from the SVG space when entering and exiting it.
👉 Note: hast is not XML. It supports SVG as embedded in HTML. It does not support the features available in XML. Passing SVG might break but fragments of modern SVG should be fine. Use
xastif you need to support SVG as XML.
tightAttributesJoin attributes together, without whitespace, if possible: get
class="a b"title="c d" instead of class="a b" title="c d" to save bytes
(boolean, default: false).
Not used in the SVG space.
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
tightCommaSeparatedListsJoin known comma-separated attribute values with just a comma (,), instead of
padding them on the right as well (,␠, where ␠ represents a space)
(boolean, default: false).
tightDoctypeDrop unneeded spaces in doctypes: <!doctypehtml> instead of <!doctype html>
to save bytes (boolean, default: false).
👉 Note: intentionally creates parse errors in markup (how parse errors are handled is well defined, so this works but isn’t pretty).
tightSelfClosingDo not use an extra space when closing self-closing elements: <img/> instead
of <img /> (boolean, default: false).
👉 Note: only used if
closeSelfClosing: trueorcloseEmptyElements: true.
upperDoctypeUse a <!DOCTYPE… instead of <!doctype… (boolean, default: false).
Useless except for XHTML.
voidsTag names of elements to serialize without closing tag (Array<string>,
default: html-void-elements).
Not used in the SVG space.
👉 Note: It’s highly unlikely that you want to pass this, because hast is not for XML, and HTML will not add more void elements.
QuoteHTML quotes for attribute values (TypeScript type).
type Quote = '"' | "'"
SpaceNamespace (TypeScript type).
type Space = 'html' | 'svg'
HTML is serialized according to WHATWG HTML (the living standard), which is also followed by browsers such as Chrome and Firefox.
This package is fully typed with TypeScript.
It exports the additional types
CharacterReferences,
Options,
Quote, and
Space.
Projects maintained by the unified collective are compatible with maintained versions of Node.js.
When we cut a new major release, we drop support for unmaintained versions of
Node.
This means we try to keep the current release line, hast-util-to-html@^9,
compatible with Node.js 16.
Use of hast-util-to-html 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.
hast-util-sanitize
— sanitize hastSee 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.
FAQs
hast utility to serialize to HTML
The npm package hast-util-to-html receives a total of 1,725,871 weekly downloads. As such, hast-util-to-html popularity was classified as popular.
We found that hast-util-to-html demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.