Live HTML · In depth

JSX rendering

Dependency-free server-side TSX that renders directly to HtmlFragment values. It provides readable components, fragments, arrays, automatic escaping, safe attributes, and existing html-fragment interoperability without React, a virtual DOM, or hydration.

Explain it like I’m five

The simple mental model

Redweb JSX is a readable HTML-shaped pencil. It turns TSX into safe server HTML directly—there is no React engine or browser copy hiding behind it.

When it fits

When should I use it?

Use it whenever nested template strings become difficult to read or reusable server-rendered components make page structure clearer.

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

TSX

// tsconfig.json
// { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "redweb" } }

import { component, page } from 'redweb'
import type { Child } from 'redweb/jsx-runtime'

const Card = component((props: { title: string; children?: Child }) => (
  <article class="card">
    <h2>{props.title}</h2>
    {props.children}
  </article>
))

@page('/docs', { css: 'docs.css', live: false })
class DocsPage {
  render() {
    return <main><Card title="Redweb">Readable server TSX</Card></main>
  }
}

1
TypeScript sends JSX calls to redweb/jsx-runtime.
2
Text and attributes are escaped while fragments, arrays, and components are flattened predictably.
3
The resulting HtmlFragment works with static pages and Live HTML without hydration.

Configuration

Choices you can make

TypeScript: jsx = react-jsx and jsxImportSource = redweb
Production runtime: redweb/jsx-runtime; development runtime: redweb/jsx-dev-runtime
External CSS and rw-* server directives replace inline styles and browser event functions

Surface area

Methods and members

Intrinsic elements

Serialize standard, SVG, custom, data-*, aria-*, and rw-* attributes with HTML-correct boolean handling.

Fragments and arrays

Compose nested fragments and readonly child arrays without wrapper markup or comma coercion.

Function components

Synchronous functions receive typed props and children and must return an HtmlFragment or fragment array.

Escaping and URLs

Text and attributes escape automatically; URL attributes retain Redweb’s safe-protocol validation.

Interoperability

Existing html fragments nest in TSX and TSX fragments nest in html for incremental migration.