JSX rendering

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

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

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

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

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.

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

Options

• 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

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.

What should I watch for?

JSX is syntax, not automatic client reactivity. Only Live HTML state and actions create a realtime channel; static-site TSX remains zero-runtime HTML.