Live HTML · In depth

html, attribute, url, each, codeBlock

Safe composition primitives escape text and quoted primitive attributes by default. URL attributes additionally reject executable, protocol-relative, and malformed values. Arrays must contain trusted HtmlFragment values.

Explain it like I’m five

The simple mental model

These helpers are different safety tools: html builds trusted structure, attribute and url escape risky contexts, each joins lists, and codeBlock displays code without executing it.

When it fits

When should I use it?

Use them for low-level templates, dynamic attributes, URLs, collections, and code samples when JSX is not the clearest representation.

A practical API pattern

Follow the example

This pattern explains the named API. Application classes, credentials, and assets may need to be supplied; use a complete recipe for a runnable starting point.

Read this article as Markdown

TypeScript

import { codeBlock, each, html } from 'redweb'

const links = sections.map(section => ({
  id: section.id,
  href: `#${section.id}`,
  label: section.name,
}))

const navigation = each(links, link => html`
  <a id="${link.id}" href="${link.href}">${link.label}</a>
`)

const example = codeBlock(source, {
  language: 'ts',
  label: 'TypeScript',
  highlight: highlightTypeScript,
})

1
Untrusted values are passed through the helper matching their HTML context.
2
HtmlFragment values preserve the distinction between approved markup and ordinary text.
3
Collection and code helpers produce predictable escaped output without hand-built concatenation.

Surface area

Methods and members

html`...`

Creates an HtmlFragment and escapes every ordinary interpolation.

attribute(value)

Optionally brands a primitive for a quoted, non-URL attribute when explicit intent improves readability.

url(value)

Optionally brands a safe relative, HTTP, HTTPS, mail, or telephone URL; direct strings receive the same validation.

each(items, render)

Validates and joins a mutable or readonly list of HtmlFragment results.

codeBlock(code, options?)

Builds an escaped figure/pre/code fragment and can invoke a safe server-side highlighter.