# JSX rendering

> Documentation for Redweb 0.13.3. 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.

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

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