Library: Hypertext Literal

Observable Framework documentation: Library: Hypertext Literal Source: https://observablehq.com/framework/lib-htl

Hypertext Literal is a “tagged template literal for HTML which interpolates values based on context, allowing automatic escaping and the interpolation of non-serializable values, such as event listeners, style objects, and other DOM nodes.”

Hypertext Literal is available by default as htl in Markdown, together with its methods html and svg. You can import it explicitly like so:

import {html} from "npm:htl";

Here’s an example of Hypertext Literal safely escaping input:

html`My favorite band is “${"dollar&pound"}” not “dollar&pound”!`