Simple utility for generating safe HTML.
npm install simple-html-template-tagSimple utility for generating safe HTML. Escapes interpolated values and supports nesting templates.
``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"}!
.toString());
`Overview
Automatically escapes strings which helps prevent code injection.
`ts
html.toString();
``html
Family & Friends
`Renders
null and undefined as empty strings.`ts
html.toString();
``html
FooBarBaz
`Renders arrays by rendering each of their elements. This also works on deep arrays.
`ts
html.toString();
``html
zero12abLast
`The result of an HTML template can be used in another HTML template.
`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}
.toString();
``html
me & the boys at 2am looking for beans
`Objects can implement the implement their own HTML rendering logic.
`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
;
}
}html
.toString();
``html
Today"s forecast:
78 °F
`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.