REDWEBAPI guide

html, attribute, url, each, codeBlock

Documentation for Redweb 0.13.0. Install that exact version when following these examples.

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

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 should I use it?

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

Follow the example

This API pattern illustrates the named surface; it may require application-owned classes, credentials, or assets. Start from a complete recipe for a runnable application.

tsx
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.

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.

What should I watch for?

Escaping is context-specific. Never treat an escaped attribute as a safe URL or mark user-provided HTML as trusted.