{"id":11018,"library":"hast-util-to-jsx-runtime","title":"HAST to JSX Runtime Transformer","description":"hast-util-to-jsx-runtime is a utility within the unifiedjs ecosystem that transforms a HAST (Hypertext Abstract Syntax Tree) into a representation suitable for automatic JSX runtimes (React, Preact, Solid, Svelte, Vue, etc.). It acts as a bridge, allowing HTML-like content represented as HAST nodes to be rendered efficiently by various JSX-based frameworks without direct framework-specific code. The package is currently at version 2.3.6 and follows a release cadence driven by feature additions, bug fixes, and type improvements, typically releasing patch and minor versions regularly. Its core value proposition is enabling framework-agnostic rendering of parsed HTML, leveraging the standard automatic JSX runtime API for broad compatibility. This design choice differentiates it by providing a unified approach to content rendering across different JSX environments.","status":"active","version":"2.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/syntax-tree/hast-util-to-jsx-runtime","tags":["javascript","hast-util","hast","html","preact","react","solid","svelte","unist","typescript"],"install":[{"cmd":"npm install hast-util-to-jsx-runtime","lang":"bash","label":"npm"},{"cmd":"yarn add hast-util-to-jsx-runtime","lang":"bash","label":"yarn"},{"cmd":"pnpm add hast-util-to-jsx-runtime","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"This package is ESM-only since v2.0.0. CommonJS `require()` is not supported.","wrong":"const { toJsxRuntime } = require('hast-util-to-jsx-runtime')","symbol":"toJsxRuntime","correct":"import { toJsxRuntime } from 'hast-util-to-jsx-runtime'"},{"note":"TypeScript users should import the `Options` type to correctly type the configuration object for `toJsxRuntime`.","symbol":"Options","correct":"import type { Options } from 'hast-util-to-jsx-runtime'"},{"note":"For optimal TypeScript support when using React/Preact, it's recommended to augment the global `JSX` namespace as described in the package documentation to prevent type errors.","symbol":"JSX namespace","correct":"declare global { namespace JSX { /* ... */ } }"}],"quickstart":{"code":"import { h } from 'hastscript';\nimport { toJsxRuntime } from 'hast-util-to-jsx-runtime';\nimport { Fragment, jsxs, jsx } from 'react/jsx-runtime';\nimport { renderToStaticMarkup } from 'react-dom/server';\n\n// Create a simple HAST tree\nconst tree = h('div', { className: 'container' }, [\n  h('h1', 'Hello, world!'),\n  h('p', 'This is a paragraph rendered from a HAST tree.'),\n  h('button', { onClick: 'alert(\"Clicked!\")' }, 'Click Me')\n]);\n\n// Transform the HAST tree into JSX elements using React's automatic runtime\n// Note: `onClick` is a string here, for actual interactivity in the browser, \n// you would typically handle event listeners differently or use a client-side hydration.\nconst jsxResult = toJsxRuntime(tree, { Fragment, jsxs, jsx });\n\n// Render the JSX elements to a static HTML string using React DOM server renderer\nconst doc = renderToStaticMarkup(jsxResult);\n\nconsole.log(doc);\n\n// Expected output: \n// <div class=\"container\"><h1>Hello, world!</h1><p>This is a paragraph rendered from a HAST tree.</p><button onclick=\"alert(&quot;Clicked!&quot;)\">Click Me</button></div>","lang":"typescript","description":"This example demonstrates converting a HAST tree to a React static HTML string, illustrating the use of `toJsxRuntime` with React's automatic JSX runtime functions."},"warnings":[{"fix":"Ensure your project is configured for ESM. Update your import statements to use `import ... from 'hast-util-to-jsx-runtime'` and ensure your `package.json` includes `\"type\": \"module\"` or files end in `.mjs`.","message":"The `hast-util-to-jsx-runtime` package is ESM-only (ECMAScript Modules) since version 2.0.0. Attempting to import it using CommonJS `require()` syntax will result in an `ERR_REQUIRE_ESM` error.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add the recommended global `JSX` namespace declaration to your project's `d.ts` file, typically by importing `JSX` from `react/jsx-runtime` (or your chosen framework's runtime) and declaring it globally, as shown in the package's documentation.","message":"When using TypeScript, if the global `JSX` namespace is not correctly defined or augmented, you may encounter type errors related to `JSX.Element`, `JSX.IntrinsicElements`, or `JSX.ElementClass`.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"After generating JSX with `toJsxRuntime`, ensure your client-side application properly mounts or hydrates the root JSX element using methods like `ReactDOM.hydrateRoot` or `ReactDOM.createRoot().render()` for React, or similar APIs for other frameworks.","message":"The package processes `hast` trees into JSX. For actual client-side interactivity, simply generating JSX elements is not enough. You will need to hydrate or mount the resulting JSX with your chosen framework on the client side.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Add the following to a global declaration file (e.g., `src/global.d.ts`): `import type {JSX as Jsx} from 'react/jsx-runtime'; declare global { namespace JSX { type ElementClass = Jsx.ElementClass; type Element = Jsx.Element; type IntrinsicElements = Jsx.IntrinsicElements; } }` (adjust `react/jsx-runtime` for your framework).","cause":"The global `JSX` namespace required by TypeScript for JSX elements is not defined or is not correctly scoped.","error":"TS2304: Cannot find name 'JSX'."},{"fix":"Convert your consuming file or project to use ES Modules. Use `import { toJsxRuntime } from 'hast-util-to-jsx-runtime'` and ensure your `package.json` contains `\"type\": \"module\"` or files use the `.mjs` extension.","cause":"Attempting to use CommonJS `require()` to import an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module ... hast-util-to-jsx-runtime.js not supported."},{"fix":"Ensure you are importing the correct runtime functions from your framework (e.g., `import { Fragment, jsxs, jsx } from 'react/jsx-runtime'`) and correctly passing them in the `options` object: `toJsxRuntime(tree, { Fragment, jsxs, jsx })`.","cause":"The JSX runtime functions (e.g., `jsx`, `jsxs`, `Fragment`) are not being correctly imported or passed to `toJsxRuntime`.","error":"TypeError: (0 , jsx_runtime_1.jsxs) is not a function"}],"ecosystem":"npm"}