Simple HTML Template Tag

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

Installation

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

`sh
yarn add simple-html-template-tag
`

`sh
pnpm add simple-html-template-tag
`

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

console.log(html

Hello, ${"world"}!

`ts
html

${"Family & Friends"}

`html


Family & Friends

Renders null and undefined as empty strings.

`ts
html

Foo${null}Bar${undefined}Baz

`html


FooBarBaz

`ts
html

${["zero", 1, 2, null, ["a", "b"], "Last"]}

`html


zero12abLast

`ts
// 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 = htmllooking for beans;

html

${who} at 2am ${what}

`html


me & the boys at 2am looking for beans

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

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

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

html

`html



Today"s forecast: 78 °F


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.