jsx-async-runtime

2.1.1 verified Fri May 01 auth: no javascript

An asynchronous JSX runtime for server-side rendering (SSR) and browser HTML template generation, with zero dependencies. Version 2.1.1 is current, with stable releases. Key differentiators: supports async components natively, automatic HTML entity escaping (v2+) for XSS prevention, and works with TypeScript, esbuild, and Babel via the react-jsx transform.

Common errors

error Cannot find module 'jsx-async-runtime' ↓

cause Package not installed or import path incorrect.

fix

Ensure npm i jsx-async-runtime is run and use import { jsxToString } from 'jsx-async-runtime'.

error TypeError: Cannot read properties of undefined (reading 'jsxEscapeHTML') ↓

cause Calling jsxToString without a `this` context.

fix

Use jsxToString.call({}, element) instead of jsxToString(element).

error Warning: You are using the nonstandard "react-jsx" JSX transform ↓

cause TypeScript compilerOptions not set correctly.

fix

Set "jsx": "react-jsx", "jsxImportSource": "jsx-async-runtime" in tsconfig.json.

Warnings

breaking Version 2.x escapes HTML entities by default, breaking raw HTML insertion from v1. ↓

fix Use the `{ html: '...' }` object pattern to insert raw HTML, or set `this.jsxEscapeHTML = false` to restore v1 behavior.

gotcha jsxToString requires `call({}, ...)` to provide a `this` context; calling it directly will fail. ↓

fix Call `jsxToString.call({}, element)` or pass a context object with `jsxEscapeHTML` and other options.

gotcha Async components must return JSX; returning a Promise that resolves to JSX is not supported. ↓

fix Use `async function` components that `await` and then return JSX directly.

Install

npm install jsx-async-runtime

yarn add jsx-async-runtime

pnpm add jsx-async-runtime

Imports

jsxToString

wrong

const { jsxToString } = require('jsx-async-runtime')

correct

import { jsxToString } from 'jsx-async-runtime'

ESM-only; CJS require will not work in v2+.

escapeEntities

wrong

import escapeEntities from 'jsx-async-runtime'

correct

import { escapeEntities } from 'jsx-async-runtime'

Named export, not default.

JSX namespace

wrong

import { JSX } from 'jsx-async-runtime'

correct

import type { JSX } from 'jsx-async-runtime'

JSX is a type-only export; use `import type` in TypeScript.

Quickstart

Renders a basic HTML page with an async JSX component, using jsxToString with a 'this' context.

import { jsxToString } from 'jsx-async-runtime';

function HelloWorld({ greeting }) {
  return (
    <>
      {{ html: '<!DOCTYPE html>' }}
      <html>
        <head>
          <meta charset="utf-8" />
          <title>{greeting}</title>
        </head>
        <body>
          <h1>{greeting}</h1>
        </body>
      </html>
    </>
  );
}

console.log(await jsxToString.call({}, <HelloWorld greeting="Hello World" />));