Registry / web-framework / hast-util-to-jsx-runtime

hast-util-to-jsx-runtime

library2.3.6jsnpmunverified

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.

web-framework serialization

npm install hast-util-to-jsx-runtime

github ↗package ↗

INSTALL

IMPORT

SIG · HAST-UTIL-TO-JSX-R

hast-util-to-jsx-runtime

web-frameworkjavascriptv2.3.6

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

toJsxRuntime

✓ import { toJsxRuntime } from 'hast-util-to-jsx-runtime'

✗ const { toJsxRuntime } = require('hast-util-to-jsx-runtime')

This package is ESM-only since v2.0.0. CommonJS `require()` is not supported.

Options

✓ import type { Options } from 'hast-util-to-jsx-runtime'

TypeScript users should import the `Options` type to correctly type the configuration object for `toJsxRuntime`.

JSX namespace

✓ declare global { namespace JSX { /* ... */ } }

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.

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.

import { h } from 'hastscript'; import { toJsxRuntime } from 'hast-util-to-jsx-runtime'; import { Fragment, jsxs, jsx } from 'react/jsx-runtime'; import { renderToStaticMarkup } from 'react-dom/server'; // Create a simple HAST tree const tree = h('div', { className: 'container' }, [ h('h1', 'Hello, world!'), h('p', 'This is a paragraph rendered from a HAST tree.'), h('button', { onClick: 'alert("Clicked!")' }, 'Click Me') ]); // Transform the HAST tree into JSX elements using React's automatic runtime // Note: `onClick` is a string here, for actual interactivity in the browser, // you would typically handle event listeners differently or use a client-side hydration. const jsxResult = toJsxRuntime(tree, { Fragment, jsxs, jsx }); // Render the JSX elements to a static HTML string using React DOM server renderer const doc = renderToStaticMarkup(jsxResult); console.log(doc); // Expected output: // <div class="container"><h1>Hello, world!</h1><p>This is a paragraph rendered from a HAST tree.</p><button onclick="alert("Clicked!")">Click Me</button></div>

Debug

Known issues

breakingThe `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.

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`.

affects: >=2.0.0

gotchaWhen 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`.

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.

affects: >=2.0.0

gotchaThe 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.

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.

affects: >=1.0.0

Errors

Common errors & fixes

TS2304: Cannot find name 'JSX'.

The global `JSX` namespace required by TypeScript for JSX elements is not defined or is not correctly scoped.

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).

Error [ERR_REQUIRE_ESM]: require() of ES Module ... hast-util-to-jsx-runtime.js not supported.

Attempting to use CommonJS `require()` to import an ESM-only package.

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.

TypeError: (0 , jsx_runtime_1.jsxs) is not a function

The JSX runtime functions (e.g., `jsx`, `jsxs`, `Fragment`) are not being correctly imported or passed to `toJsxRuntime`.

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 })`.

Upgrade

Version history

2.3.6latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

12 hits · last 30 days

node

Resources

githubhttps://github.com/syntax-tree/hast-util-to-jsx-runtime ↗

packagehttps://www.npmjs.com/package/hast-util-to-jsx-runtime ↗