{"id":25813,"library":"jsx-async-runtime","title":"jsx-async-runtime","description":"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.","status":"active","version":"2.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/jeasx/jsx-async-runtime","tags":["javascript","async","engine","html","jsx","node","runtime","ssr","template","typescript"],"install":[{"cmd":"npm install jsx-async-runtime","lang":"bash","label":"npm"},{"cmd":"yarn add jsx-async-runtime","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsx-async-runtime","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"ESM-only; CJS require will not work in v2+.","wrong":"const { jsxToString } = require('jsx-async-runtime')","symbol":"jsxToString","correct":"import { jsxToString } from 'jsx-async-runtime'"},{"note":"Named export, not default.","wrong":"import escapeEntities from 'jsx-async-runtime'","symbol":"escapeEntities","correct":"import { escapeEntities } from 'jsx-async-runtime'"},{"note":"JSX is a type-only export; use `import type` in TypeScript.","wrong":"import { JSX } from 'jsx-async-runtime'","symbol":"JSX namespace","correct":"import type { JSX } from 'jsx-async-runtime'"}],"quickstart":{"code":"import { jsxToString } from 'jsx-async-runtime';\n\nfunction HelloWorld({ greeting }) {\n  return (\n    <>\n      {{ html: '<!DOCTYPE html>' }}\n      <html>\n        <head>\n          <meta charset=\"utf-8\" />\n          <title>{greeting}</title>\n        </head>\n        <body>\n          <h1>{greeting}</h1>\n        </body>\n      </html>\n    </>\n  );\n}\n\nconsole.log(await jsxToString.call({}, <HelloWorld greeting=\"Hello World\" />));","lang":"typescript","description":"Renders a basic HTML page with an async JSX component, using jsxToString with a 'this' context."},"warnings":[{"fix":"Use the `{ html: '...' }` object pattern to insert raw HTML, or set `this.jsxEscapeHTML = false` to restore v1 behavior.","message":"Version 2.x escapes HTML entities by default, breaking raw HTML insertion from v1.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Call `jsxToString.call({}, element)` or pass a context object with `jsxEscapeHTML` and other options.","message":"jsxToString requires `call({}, ...)` to provide a `this` context; calling it directly will fail.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use `async function` components that `await` and then return JSX directly.","message":"Async components must return JSX; returning a Promise that resolves to JSX is not supported.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-05-01T00:00:00.000Z","next_check":"2026-07-30T00:00:00.000Z","problems":[{"fix":"Ensure `npm i jsx-async-runtime` is run and use `import { jsxToString } from 'jsx-async-runtime'`.","cause":"Package not installed or import path incorrect.","error":"Cannot find module 'jsx-async-runtime'"},{"fix":"Use `jsxToString.call({}, element)` instead of `jsxToString(element)`.","cause":"Calling jsxToString without a `this` context.","error":"TypeError: Cannot read properties of undefined (reading 'jsxEscapeHTML')"},{"fix":"Set `\"jsx\": \"react-jsx\", \"jsxImportSource\": \"jsx-async-runtime\"` in tsconfig.json.","cause":"TypeScript compilerOptions not set correctly.","error":"Warning: You are using the nonstandard \"react-jsx\" JSX transform"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}