Simple HTML Template Tag

Simple utility for generating safe HTML. Escapes interpolated values and supports nesting templates.

Installation

npm install --save simple-html-template-tag

yarn add simple-html-template-tag

pnpm add simple-html-template-tag

import { html } from "simple-html-template-tag";

console.log(html`<p>Hello, ${"world"}!</p>`.toString());

Overview

Automatically escapes strings which helps prevent code injection.

html`<h1>${"Family & Friends"}</h1>`.toString();

<h1>Family &amp; Friends</h1>

Renders null and undefined as empty strings.

html`<h1>Foo${null}Bar${undefined}Baz</h1>`.toString();

<h1>FooBarBaz</h1>

Renders arrays by rendering each of their elements. This also works on deep arrays.

html`<h1>${["zero", 1, 2, null, ["a", "b"], "Last"]}</h1>`.toString();

<h1>zero12abLast</h1>

The result of an HTML template can be used in another HTML template.

// This will be escaped because it's a string.
const who = "me & the boys";
// However, this will not be escaped because it uses the html template tag.
const what = html`looking for <strong>beans</strong>`;

html`<p>${who} at 2am ${what}</p>`.toString();

<p>me &amp; the boys at 2am looking for <strong>beans</strong></p>

Objects can implement the implement their own HTML rendering logic.

import { html, toHtml, type ToHtml } from "simple-html-template-tag";

class Weather implements ToHtml {
  constructor(public condition: string, public tempF: number) {}

  [toHtml]() {
    return html`<img
        src="/assets/${this.condition}.png"
        alt="${this.condition}"
      />
      ${this.tempF} &deg;F`;
  }
}

html`<div>Today&quot;s forecast: ${new Weather("sunny", 78)}</div>`.toString();

<div>
  Today&quot;s forecast: <img src="/assets/sunny.png" alt="sunny" /> 78 &deg;F
</div>

Editor Integrations

This library works with several of the tools built for lit-html.

Prettier will automatically format template literals tagged with html. No extra config is needed.

The lit-html plugin for VSCode provides good syntax highting and IntelliSense.