html-template

Safe HTML template tag with auto-escaping for JavaScript.

html-template provides a tagged template literal for safely constructing HTML strings with automatic escaping of interpolated values to prevent XSS vulnerabilities.

Features

- Automatic HTML escaping - All interpolated values are escaped by default
- Explicit raw HTML - Use html.raw when you need unescaped HTML from trusted sources
- Composable - SafeHtml values can be nested without double-escaping
- Type-safe - Full TypeScript support with branded types
- Zero dependencies - Lightweight and self-contained
- Runtime agnostic - Works in Node.js, Bun, Deno, browsers, and edge runtimes

Installation

Install from npm:

``sh
npm install @remix-run/html-template
`

Usage

`ts
import { html } from '@remix-run/html-template'

let userInput = ''
let greeting = html

Hello ${userInput}!

If you have trusted HTML that should not be escaped, use html.raw:

`ts
import { html } from '@remix-run/html-template'

let trustedIcon = ''
let button = html.raw${trustedIcon} Click me

console.log(String(button))
// => Click me
`

Warning: Only use html.raw with content you trust. Never use it with user input.

$3

SafeHtml values can be nested without double-escaping:

`ts
import { html } from '@remix-run/html-template'

let title = html

My Title

Some content with ${userInput}

let page = html



${title} ${content}



`

$3

You can interpolate arrays of values, which will be flattened and joined:

`ts
import { html } from '@remix-run/html-template'

let items = ['Apple', 'Banana', 'Cherry']
let list = html

${items.map((item) => html
• ${item}
)}

Use null or undefined to render nothing:

`ts
import { html } from '@remix-run/html-template'

let showError = false
let errorMessage = 'Something went wrong'
let page = html

- @remix-run/fetch-router` - HTTP router that works great with html-template

License

See LICENSE