html-template-tag

html-template-tag is a small open-source npm package that provides an ES6 tagged template function for compiling and escaping HTML strings in JavaScript. It takes a template literal with interpolated expressions and returns a string where HTML special characters are automatically escaped, making it useful for safe server-rendered HTML.

What is html-template-tag?

html-template-tag is a standalone JavaScript utility published on npm under the name html-template-tag. It implements a tagged template function that you place before a template literal, so `${name}` becomes the escaped value of the name variable rather than JavaScript string concatenation. The package runs in Node.js and can be imported with either CommonJS require or ES6 import. It is available from the GitHub repository AntonioVdlC/html-template-tag and is licensed under MIT.

Key Features

• Automatic HTML escaping — Escapes <, >, &, and quote characters in every interpolated value, preventing XSS from user-provided strings.
• Loop-safe interpolation — Because each interpolation is escaped independently, you can call .map() inside the template and produce repeated elements with correctly escaped content.
• Skip escaping with double dollar signs — Writing `$${value}` inserts a value without escaping, allowing intentional raw HTML if you trust the source.
• Template pre-compiling — You can store a tagged template in a variable and invoke it later with a data object, turning it into a reusable function that outputs HTML.
• URI attribute XSS guard — Interpolations inside URI attributes such as href are removed or escaped to block common XSS attack vectors; the README links to the OWASP XSS Filter Evasion Cheat Sheet.
• Formatting preservation — The original indentation and line breaks in the template literal are kept in the output string.
• MIT license — Free to use in any project without restriction.

Who is it for?

• Node.js backend developers who want to generate HTML email templates or server-rendered pages without pulling in a large templating engine like Handlebars or EJS.
• Front-end developers working with build tools that support ES6 template literals and need a tiny helper to safely interpolate data into HTML strings.
• Security-conscious programmers who need a dependency-light way to escape output and avoid XSS when inserting user-generated content into HTML.

How does html-template-tag work?

1. Install the package with npm install html-template-tag.
2. Import it: const html = require('html-template-tag') or import html from 'html-template-tag'.
3. Use the html tag before a template literal; any `${expression}` is escaped, while `$${expression}` is inserted raw.

The README provides working examples of string interpolation, loop usage, pre-compiling templates, and URI attribute interpolation.

What can you do with html-template-tag?

• Security-conscious developers: Escape user-generated comments or usernames in HTML responses to prevent XSS attacks.
• Backend engineers: Map over arrays of data inside the template to produce lists, tables, or dropdown menus with per-item escaping.
• Email template authors: Pre-compile a reusable HTML email template as a function and call it with different data objects for each recipient.
• Front-end developers: Insert trusted raw HTML fragments from a CMS or a known-safe source using the double-dollar syntax.

FAQ

Is html-template-tag free?

Yes, it is open-source and distributed under the MIT license, so it can be used in both personal and commercial projects without cost.

Does html-template-tag work with React?

It is a generic JavaScript tagged template and is not tied to any framework. It works wherever you can write ES6 template literals, but it does not provide React components or hooks.

How do I insert unescaped HTML?

Use double dollar signs: in a template literal, write `$${value}` instead of `${value}`. The content will be inserted without escaping, so only use it with trusted strings.

What characters are escaped by default?

The implementation escapes HTML special characters including <, >, &, and quotes. The exact set covers the characters needed to neutralize XSS in text content and attributes.