What HTML processing is used on observablehq?

Question

I just read up on the changes in d6.js version 6 and stumbled across this d3.groups() example on observablehq.com.

There, I saw the following code snippet to create an HTML table from the Map athletesBySport:

html`<table>
  <thead>
    <tr><th>Sport</th><th>Athletes</th></tr>
  </thead>
  <tbody>${Array.from(athletesBySport, ([key, values]) => html`
    <tr>
      <td>${key}</td>
      <td>${values.map(d => d.name).join(", ")}</td>
    </tr>`)}</tbody>
</table>`

What kind of "markup" / HTML processing is this? Some special patterns that I can detect are

hmtl`...`

and the

$

sign which seems to allow to execute a script that generates inline html.

Answer 1

The answer to this question can be found here, in Observable's standard library. This introduction also explores the standard library.

---

The

html`...`

part is "just" a JavaScript tagged template literal, i.e., a JavaScript template literal that is parsed with a specific method.

From Observable's documentation:

html`string`

Returns the HTML element represented by the specified HTML string literal. This function is intended to be used as a tagged template literal. Leading and trailing whitespace is automatically trimmed. For example, to create an H1 element whose content is “Hello, world!”: html`<h1>Hello, world!`

---

The documentation further states how expressions embedded with $ are handled:

If an embedded expression is a DOM element, it is embedded in generated HTML. For example, to embed TeX within HTML:

html`I like ${tex`\KaTeX`} for math.`

If an embedded expression is an array, the elements of the array are embedded in the generated HTML.

---

There are more tagged literals availabe in Observable, such as svg, md for markdown, tex for LaTex, and more.