JSX Runtime

The @pagesmith/site/jsx-runtime module provides a lightweight JSX-to-HTML runtime for server-side rendering. It is designed for static site generation — no virtual DOM, no hydration, no client-side runtime.

In src/entry-server.tsx, layout components return HtmlString trees that are coerced with String(...) before being embedded in the larger HTML document string returned from render().

How it works

The runtime exports three primitives:

• h(tag, props, ...children) — Creates an HtmlString from an element tag or function component. Automatically escapes text content and attribute values.
• Fragment({ children, innerHTML }) — Renders children in sequence, or injects raw HTML via innerHTML.
• HtmlString — A wrapper class that marks a string as safe HTML, preventing double-escaping.

JSX configuration

Configure the TypeScript compiler to use the site JSX runtime:

1{2  "compilerOptions": {3    "jsx": "react-jsx",4    "jsxImportSource": "@pagesmith/site"5  }6}

And the Vite/OXC transpiler:

1oxc: {2  jsx: {3    runtime: 'automatic',4    importSource: '@pagesmith/site',5  },6}

Differences from React

The site JSX runtime uses standard HTML attribute names:

1// React2<div className="prose" dangerouslySetInnerHTML={{ __html: html }} />34// Site JSX5<div class="prose" innerHTML={html} />

Key differences:

Rendering to string

Components render by calling h() which returns an HtmlString. Converting to a string is implicit:

1import { h, Fragment } from "@pagesmith/site/jsx-runtime";23function Greeting({ name }: { name: string }) {4  return <p>Hello, {name}!</p>;5}67const html = String(<Greeting name="World" />);8// => '<p>Hello, World!</p>'

The React example uses renderToStaticMarkup(<Component />). This example achieves the same result with String(h(Component, props)) — or simply by embedding the component in a template literal, since HtmlString.toString() returns the HTML.