# hast-util-to-jsx-runtime [![Build][badge-build-image]][badge-build-url] [![Coverage][badge-coverage-image]][badge-coverage-url] [![Downloads][badge-downloads-image]][badge-downloads-url] [![Size][badge-size-image]][badge-size-url] hast utility to transform a tree to preact, react, solid, svelte, vue, etcetera, with an automatic JSX runtime. ## Contents * [What is this?](#what-is-this) * [When should I use this?](#when-should-i-use-this) * [Install](#install) * [Use](#use) * [API](#api) * [`toJsxRuntime(tree, options)`](#tojsxruntimetree-options) * [`Components`](#components) * [`CreateEvaluater`](#createevaluater) * [`ElementAttributeNameCase`](#elementattributenamecase) * [`EvaluateExpression`](#evaluateexpression) * [`EvaluateProgram`](#evaluateprogram) * [`Evaluater`](#evaluater) * [`ExtraProps`](#extraprops) * [`Fragment`](#fragment) * [`Jsx`](#jsx) * [`JsxDev`](#jsxdev) * [`Options`](#options) * [`Props`](#props) * [`Source`](#source) * [`Space`](#space) * [`StylePropertyNameCase`](#stylepropertynamecase) * [Errors](#errors) * [Examples](#examples) * [Example: Preact](#example-preact) * [Example: Solid](#example-solid) * [Example: Svelte](#example-svelte) * [Example: Vue](#example-vue) * [Syntax](#syntax) * [Compatibility](#compatibility) * [Security](#security) * [Related](#related) * [Contribute](#contribute) * [License](#license) ## What is this? This package is a utility that takes a [hast][github-hast] tree and an [automatic JSX runtime][reactjs-jsx-runtime] and turns the tree into anything you wish. ## When should I use this? You can use this package when you have a hast syntax tree and want to use it with whatever framework. This package uses an automatic JSX runtime, which is a sort of lingua franca for frameworks to support JSX. Notably, automatic runtimes have support for passing extra information in development, and have guaranteed support for fragments. ## Install This package is [ESM only][github-gist-esm]. In Node.js (version 16+), install with [npm][npmjs-install]: ```sh npm install hast-util-to-jsx-runtime ``` In Deno with [`esm.sh`][esmsh]: ```js import {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2' ``` In browsers with [`esm.sh`][esmsh]: ```html ``` ## Use ```js 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' const tree = h('h1', 'Hello, world!') const doc = renderToStaticMarkup(toJsxRuntime(tree, {Fragment, jsxs, jsx})) console.log(doc) ``` Yields: ```html

Hello, world!

``` > **Note**: > to add better type support, > register a global JSX namespace: > > ```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 > } > } > ``` ## API This package exports the identifier [`toJsxRuntime`][api-to-jsx-runtime]. It exports the [TypeScript][] types [`Components`][api-components], [`CreateEvaluater`][api-create-evaluater], [`ElementAttributeNameCase`][api-element-attribute-name-case], [`EvaluateExpression`][api-evaluate-expression], [`EvaluateProgram`][api-evaluate-program], [`Evaluater`][api-evaluater], [`ExtraProps`][api-extra-props], [`Fragment`][api-fragment], [`Jsx`][api-jsx], [`JsxDev`][api-jsx-dev], [`Options`][api-options], [`Props`][api-props], [`Source`][api-source], [`Space`][api-Space], and [`StylePropertyNameCase`][api-style-property-name-case]. There is no default export. ### `toJsxRuntime(tree, options)` Transform a hast tree to preact, react, solid, svelte, vue, etcetera, with an automatic JSX runtime. ##### Parameters * `tree` ([`Node`][github-hast-nodes]) — tree to transform * `options` ([`Options`][api-options], required) — configuration ##### Returns Result from your configured JSX runtime (`JSX.Element` if defined, otherwise `unknown` which you can cast yourself). ### `Components` Possible components to use (TypeScript type). Each key is a tag name typed in `JSX.IntrinsicElements`, if defined. Each value is either a different tag name or a component accepting the corresponding props (and an optional `node` prop if `passNode` is on). You can access props at `JSX.IntrinsicElements`. For example, to find props for `a`, use `JSX.IntrinsicElements['a']`. ###### Type ```ts import type {Element} from 'hast' type ExtraProps = {node?: Element | undefined} type Components = { [TagName in keyof JSX.IntrinsicElements]: | Component | keyof JSX.IntrinsicElements } type Component = // Class component: | (new (props: ComponentProps) => JSX.ElementClass) // Function component: | ((props: ComponentProps) => JSX.Element | string | null | undefined) ``` ### `CreateEvaluater` Create an evaluator that turns ESTree ASTs from embedded MDX into values (TypeScript type). ###### Parameters There are no parameters. ###### Returns Evaluater ([`Evaluater`][api-evaluater]). ### `ElementAttributeNameCase` Casing to use for attribute names (TypeScript type). HTML casing is for example `class`, `stroke-linecap`, `xml:lang`. React casing is for example `className`, `strokeLinecap`, `xmlLang`. ###### Type ```ts type ElementAttributeNameCase = 'html' | 'react' ``` ### `EvaluateExpression` Turn an MDX expression into a value (TypeScript type). ###### Parameters * `expression` (`Expression` from `@types/estree`) — estree expression ###### Returns Result of expression (`unknown`). ### `EvaluateProgram` Turn an MDX program (export/import statements) into a value (TypeScript type). ###### Parameters * `program` (`Program` from `@types/estree`) — estree program ###### Returns Result of program (`unknown`); should likely be `undefined` as ESM changes the scope but doesn’t yield something. ### `Evaluater` Evaluator that turns ESTree ASTs from embedded MDX into values (TypeScript type). ###### Fields * `evaluateExpression` ([`EvaluateExpression`][api-evaluate-expression]) — evaluate an expression * `evaluateProgram` ([`EvaluateProgram`][api-evaluate-program]) — evaluate a program ### `ExtraProps` Extra fields we pass (TypeScript type). ###### Type ```ts type ExtraProps = {node?: Element | undefined} ``` ### `Fragment` Represent the children, typically a symbol (TypeScript type). ###### Type ```ts type Fragment = unknown ``` ### `Jsx` Create a production element (TypeScript type). ###### Parameters * `type` (`unknown`) — element type: `Fragment` symbol, tag name (`string`), component * `props` ([`Props`][api-props]) — element props, `children`, and maybe `node` * `key` (`string` or `undefined`) — dynamicly generated key to use ###### Returns Element from your framework (`JSX.Element` if defined, otherwise `unknown` which you can cast yourself). ### `JsxDev` Create a development element (TypeScript type). ###### Parameters * `type` (`unknown`) — element type: `Fragment` symbol, tag name (`string`), component * `props` ([`Props`][api-props]) — element props, `children`, and maybe `node` * `key` (`string` or `undefined`) — dynamicly generated key to use * `isStaticChildren` (`boolean`) — whether two or more children are passed (in an array), which is whether `jsxs` or `jsx` would be used * `source` ([`Source`][api-source]) — info about source * `self` (`undefined`) — nothing (this is used by frameworks that have components, we don’t) ###### Returns Element from your framework (`JSX.Element` if defined, otherwise `unknown` which you can cast yourself). ### `Options` Configuration (TypeScript type). ###### Fields * `Fragment` ([`Fragment`][api-fragment], required) — fragment * `jsxDEV` ([`JsxDev`][api-jsx-dev], required in development) — development JSX * `jsxs` ([`Jsx`][api-jsx], required in production) — static JSX * `jsx` ([`Jsx`][api-jsx], required in production) — dynamic JSX * `components` ([`Partial`][api-components], optional) — components to use * `createEvaluater` ([`CreateEvaluater`][api-create-evaluater], optional) — create an evaluator that turns ESTree ASTs into values * `development` (`boolean`, default: `false`) — whether to use `jsxDEV` when on or `jsx` and `jsxs` when off * `elementAttributeNameCase` ([`ElementAttributeNameCase`][api-element-attribute-name-case], default: `'react'`) — specify casing to use for attribute names * `filePath` (`string`, optional) — file path to the original source file, passed in source info to `jsxDEV` when using the automatic runtime with `development: true` * `passNode` (`boolean`, default: `false`) — pass the hast element node to components * `space` ([`Space`][api-space], default: `'html'`) — whether `tree` is in the `'html'` or `'svg'` space, when an `

hi!

``` In a browser, do: ```js import {h} from 'https://esm.sh/hastscript@9' import {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2' import {Fragment, jsx, jsxs} from 'https://esm.sh/solid-js@1/h/jsx-runtime' import {render} from 'https://esm.sh/solid-js@1/web' render(Component, document.getElementById('root')) function Component() { return toJsxRuntime(h('h1', 'hi!'), { Fragment, jsx, jsxs, elementAttributeNameCase: 'html', stylePropertyNameCase: 'css' }) } ``` To add better type support, register a global JSX namespace: ```ts import type {JSX as Jsx} from 'solid-js/jsx-runtime' declare global { namespace JSX { type ElementClass = Jsx.ElementClass type Element = Jsx.Element type IntrinsicElements = Jsx.IntrinsicElements } } ``` ### Example: Svelte I have no clue how to render a Svelte component in Node, but you can get that component with: ```js import {h} from 'hastscript' import {toJsxRuntime} from 'hast-util-to-jsx-runtime' import {Fragment, jsx, jsxs} from 'svelte-jsx' const svelteComponent = toJsxRuntime(h('h1', 'hi!'), {Fragment, jsx, jsxs}) console.log(svelteComponent) ``` Yields: ```text [class Component extends SvelteComponent] ``` Types for Svelte are broken. Raise it with Svelte. ### Example: Vue > 👉 **Note**: > you must set `elementAttributeNameCase: 'html'` for Vue. In Node.js, do: ```js import serverRenderer from '@vue/server-renderer' import {h} from 'hastscript' import {toJsxRuntime} from 'hast-util-to-jsx-runtime' import {Fragment, jsx, jsxs} from 'vue/jsx-runtime' // Available since `vue@3.3`. console.log( await serverRenderer.renderToString( toJsxRuntime(h('h1', 'hi!'), { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' }) ) ) ``` Yields: ```html

hi!

``` In a browser, do: ```js import {h} from 'https://esm.sh/hastscript@9' import {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2' import {createApp} from 'https://esm.sh/vue@3' import {Fragment, jsx, jsxs} from 'https://esm.sh/vue@3/jsx-runtime' createApp(Component).mount('#root') function Component() { return toJsxRuntime(h('h1', 'hi!'), { Fragment, jsx, jsxs, elementAttributeNameCase: 'html' }) } ``` To add better type support, register a global JSX namespace: ```ts import type {JSX as Jsx} from 'vue/jsx-runtime' declare global { namespace JSX { type ElementClass = Jsx.ElementClass type Element = Jsx.Element type IntrinsicElements = Jsx.IntrinsicElements } } ``` ## Syntax HTML is parsed according to WHATWG HTML (the living standard), which is also followed by browsers such as Chrome, Firefox, and Safari. ## Compatibility Projects maintained by the unified collective are compatible with maintained versions of Node.js. When we cut a new major release, we drop support for unmaintained versions of Node. This means we try to keep the current release line, `hast-util-to-jsx-runtime@2`, compatible with Node.js 16. ## Security Be careful with user input in your hast tree. Use [`hast-util-santize`][github-hast-util-sanitize] to make hast trees safe. ## Related * [`hastscript`](https://github.com/syntax-tree/hastscript) — build hast trees * [`hast-util-to-html`](https://github.com/syntax-tree/hast-util-to-html) — serialize hast as HTML * [`hast-util-sanitize`][github-hast-util-sanitize] — sanitize hast ## Contribute See [`contributing.md`][health-contributing] in [`syntax-tree/.github`][health] for ways to get started. See [`support.md`][health-support] for ways to get help. This project has a [code of conduct][health-coc]. By interacting with this repository, organization, or community you agree to abide by its terms. ## License [MIT][file-license] © [Titus Wormer][wooorm] [api-components]: #components [api-create-evaluater]: #createevaluater [api-element-attribute-name-case]: #elementattributenamecase [api-evaluate-expression]: #evaluateexpression [api-evaluate-program]: #evaluateprogram [api-evaluater]: #evaluater [api-extra-props]: #extraprops [api-fragment]: #fragment [api-jsx]: #jsx [api-jsx-dev]: #jsxdev [api-options]: #options [api-props]: #props [api-source]: #source [api-space]: #space [api-style-property-name-case]: #stylepropertynamecase [api-to-jsx-runtime]: #tojsxruntimetree-options [badge-build-image]: https://github.com/syntax-tree/hast-util-to-jsx-runtime/workflows/main/badge.svg [badge-build-url]: https://github.com/syntax-tree/hast-util-to-jsx-runtime/actions [badge-coverage-image]: https://img.shields.io/codecov/c/github/syntax-tree/hast-util-to-jsx-runtime.svg [badge-coverage-url]: https://codecov.io/github/syntax-tree/hast-util-to-jsx-runtime [badge-downloads-image]: https://img.shields.io/npm/dm/hast-util-to-jsx-runtime.svg [badge-downloads-url]: https://www.npmjs.com/package/hast-util-to-jsx-runtime [badge-size-image]: https://img.shields.io/bundlejs/size/hast-util-to-jsx-runtime [badge-size-url]: https://bundlejs.com/?q=hast-util-to-jsx-runtime [esmsh]: https://esm.sh [file-license]: license [github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c [github-hast]: https://github.com/syntax-tree/hast [github-hast-nodes]: https://github.com/syntax-tree/hast#nodes [github-hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize [health]: https://github.com/syntax-tree/.github [health-coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md [health-contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md [health-support]: https://github.com/syntax-tree/.github/blob/main/support.md [npmjs-install]: https://docs.npmjs.com/cli/install [reactjs-jsx-runtime]: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html [typescript]: https://www.typescriptlang.org [wooorm]: https://wooorm.com

c	File Name	Size	T	Date
zip	lib/	7	---	2025-08-12 18:35:00
-	index.d.ts	303	ts	2025-08-12 10:28:31
-	index.js	86	js	2025-08-12 10:28:31
-	license	1094	%	2025-08-12 10:28:31
-	package.json	3705	json	2025-08-12 10:28:31
-	readme.md	20738	md	2025-08-12 10:28:31

🌲 / sam syncthing Code museum-frontend node_modules hast-util-to-jsx-runtime

control-panel