REDWEBAPI guide

html, attribute, url, each, codeBlock

Documentation for Redweb 0.16.4. 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>
`)

// TS, TSX and JS highlight automatically, including rw-* action references.
const example = codeBlock(source, { language: 'tsx', label: 'TypeScript' })
  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 with automatic JS/TS/TSX highlighting; custom highlighters and opt-out remain available.

highlightCode(source, language)

Returns safely escaped token markup, including identifiers inside rw-* JSX action expressions.

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.