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 & 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 & 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} °F`;
}
}
html`<div>Today"s forecast: ${new Weather("sunny", 78)}</div>`.toString();
<div>
Today"s forecast: <img src="/assets/sunny.png" alt="sunny" /> 78 °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.