{"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,"search_vec":"'2.3.6':77 'abstract':24 'across':135 'act':42 'addit':86 'agnost':107 'allow':46 'api':118 'approach':131 'automat':32,115 'base':63 'bridg':45 'broad':120 'bug':87 'cadenc':82 'choic':124 'code':70 'compat':121 'content':50,133 'core':100 'current':74 'design':123 'differ':136 'differenti':125 'direct':66 'driven':83 'ecosystem':18 'effici':58 'enabl':104 'environ':138 'etc':40 'featur':85 'fix':88 'follow':79 'framework':64,68,106 'framework-agnost':105 'framework-specif':67 'hast':1,7,22,53,141,143 'hast-util':140 'hast-util-to-jsx-runtim':6 'html':48,111,144 'html-like':47 'hypertext':23 'improv':91 'javascript':139 'jsx':3,10,33,62,116,137 'jsx-base':61 'leverag':112 'like':49 'minor':96 'node':54 'packag':72 'pars':110 'patch':94 'preact':36,145 'proposit':102 'provid':128 'react':35,146 'regular':98 'releas':81,93 'render':57,108,134 'repres':51 'represent':29 'runtim':4,11,34,117 'solid':37,147 'specif':69 'standard':114 'suitabl':30 'svelt':38,148 'syntax':25 'transform':5,20 'tree':26 'type':90 'typescript':150 'typic':92 'unifi':130 'unifiedj':17 'unist':149 'util':8,14,142 'valu':101 'various':60 'version':76,97 'vue':39 'within':15 'without':65","created_at":"2026-04-19T13:35:49.273624+00:00","updated_at":"2026-04-19T13:35:49.273624+00:00","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","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/syntax-tree/hast-util-to-jsx-runtime","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/hast-util-to-jsx-runtime","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework","serialization"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}