{"id":13716805,"url":"https://github.com/syntax-tree/hast-util-to-jsx-runtime","last_synced_at":"2025-04-10T02:22:56.147Z","repository":{"id":65281284,"uuid":"588975953","full_name":"syntax-tree/hast-util-to-jsx-runtime","owner":"syntax-tree","description":"hast utility to transform to preact, react, solid, svelte, vue, etc","archived":false,"fork":false,"pushed_at":"2024-04-04T11:52:15.000Z","size":146,"stargazers_count":39,"open_issues_count":2,"forks_count":3,"subscribers_count":8,"default_branch":"main","last_synced_at":"2024-05-05T04:03:44.403Z","etag":null,"topics":["hast","hast-util","jsx","preact","react","runtime","solid","svelte","vue"],"latest_commit_sha":null,"homepage":"https://unifiedjs.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syntax-tree.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"unifiedjs","open_collective":"unified"}},"created_at":"2023-01-14T16:59:44.000Z","updated_at":"2024-05-30T06:29:28.903Z","dependencies_parsed_at":"2024-05-30T06:44:47.440Z","dependency_job_id":null,"html_url":"https://github.com/syntax-tree/hast-util-to-jsx-runtime","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fhast-util-to-jsx-runtime","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fhast-util-to-jsx-runtime/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fhast-util-to-jsx-runtime/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syntax-tree%2Fhast-util-to-jsx-runtime/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syntax-tree","download_url":"https://codeload.github.com/syntax-tree/hast-util-to-jsx-runtime/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248143272,"owners_count":21054744,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hast","hast-util","jsx","preact","react","runtime","solid","svelte","vue"],"created_at":"2024-08-03T00:01:14.569Z","updated_at":"2025-04-10T02:22:56.102Z","avatar_url":"https://github.com/syntax-tree.png","language":"JavaScript","funding_links":["https://github.com/sponsors/unifiedjs","https://opencollective.com/unified"],"categories":["hast utilities","JavaScript"],"sub_categories":[],"readme":"# hast-util-to-jsx-runtime\n\n[![Build][badge-build-image]][badge-build-url]\n[![Coverage][badge-coverage-image]][badge-coverage-url]\n[![Downloads][badge-downloads-image]][badge-downloads-url]\n[![Size][badge-size-image]][badge-size-url]\n\nhast utility to transform a tree to\npreact, react, solid, svelte, vue, etcetera,\nwith an automatic JSX runtime.\n\n## Contents\n\n* [What is this?](#what-is-this)\n* [When should I use this?](#when-should-i-use-this)\n* [Install](#install)\n* [Use](#use)\n* [API](#api)\n  * [`toJsxRuntime(tree, options)`](#tojsxruntimetree-options)\n  * [`Components`](#components)\n  * [`CreateEvaluater`](#createevaluater)\n  * [`ElementAttributeNameCase`](#elementattributenamecase)\n  * [`EvaluateExpression`](#evaluateexpression)\n  * [`EvaluateProgram`](#evaluateprogram)\n  * [`Evaluater`](#evaluater)\n  * [`ExtraProps`](#extraprops)\n  * [`Fragment`](#fragment)\n  * [`Jsx`](#jsx)\n  * [`JsxDev`](#jsxdev)\n  * [`Options`](#options)\n  * [`Props`](#props)\n  * [`Source`](#source)\n  * [`Space`](#space)\n  * [`StylePropertyNameCase`](#stylepropertynamecase)\n* [Errors](#errors)\n* [Examples](#examples)\n  * [Example: Preact](#example-preact)\n  * [Example: Solid](#example-solid)\n  * [Example: Svelte](#example-svelte)\n  * [Example: Vue](#example-vue)\n* [Syntax](#syntax)\n* [Compatibility](#compatibility)\n* [Security](#security)\n* [Related](#related)\n* [Contribute](#contribute)\n* [License](#license)\n\n## What is this?\n\nThis package is a utility that takes a [hast][github-hast] tree and an\n[automatic JSX runtime][reactjs-jsx-runtime] and turns the tree into anything\nyou wish.\n\n## When should I use this?\n\nYou can use this package when you have a hast syntax tree and want to use it\nwith whatever framework.\n\nThis package uses an automatic JSX runtime,\nwhich is a sort of lingua franca for frameworks to support JSX.\n\nNotably,\nautomatic runtimes have support for passing extra information in development,\nand have guaranteed support for fragments.\n\n## Install\n\nThis package is [ESM only][github-gist-esm].\nIn Node.js (version 16+),\ninstall with [npm][npmjs-install]:\n\n```sh\nnpm install hast-util-to-jsx-runtime\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2?bundle'\n\u003c/script\u003e\n```\n\n## Use\n\n```js\nimport {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\nconst tree = h('h1', 'Hello, world!')\n\nconst doc = renderToStaticMarkup(toJsxRuntime(tree, {Fragment, jsxs, jsx}))\n\nconsole.log(doc)\n```\n\nYields:\n\n```html\n\u003ch1\u003eHello, world!\u003c/h1\u003e\n```\n\n\u003e **Note**:\n\u003e to add better type support,\n\u003e register a global JSX namespace:\n\u003e\n\u003e ```ts\n\u003e import type {JSX as Jsx} from 'react/jsx-runtime'\n\u003e\n\u003e declare global {\n\u003e   namespace JSX {\n\u003e     type ElementClass = Jsx.ElementClass\n\u003e     type Element = Jsx.Element\n\u003e     type IntrinsicElements = Jsx.IntrinsicElements\n\u003e   }\n\u003e }\n\u003e ```\n\n## API\n\nThis package exports the identifier [`toJsxRuntime`][api-to-jsx-runtime].\nIt exports the [TypeScript][] types\n[`Components`][api-components],\n[`CreateEvaluater`][api-create-evaluater],\n[`ElementAttributeNameCase`][api-element-attribute-name-case],\n[`EvaluateExpression`][api-evaluate-expression],\n[`EvaluateProgram`][api-evaluate-program],\n[`Evaluater`][api-evaluater],\n[`ExtraProps`][api-extra-props],\n[`Fragment`][api-fragment],\n[`Jsx`][api-jsx],\n[`JsxDev`][api-jsx-dev],\n[`Options`][api-options],\n[`Props`][api-props],\n[`Source`][api-source],\n[`Space`][api-Space],\nand\n[`StylePropertyNameCase`][api-style-property-name-case].\nThere is no default export.\n\n### `toJsxRuntime(tree, options)`\n\nTransform a hast tree to\npreact, react, solid, svelte, vue, etcetera,\nwith an automatic JSX runtime.\n\n##### Parameters\n\n* `tree`\n  ([`Node`][github-hast-nodes])\n  — tree to transform\n* `options`\n  ([`Options`][api-options], required)\n  — configuration\n\n##### Returns\n\nResult from your configured JSX runtime\n(`JSX.Element` if defined,\notherwise `unknown` which you can cast yourself).\n\n### `Components`\n\nPossible components to use (TypeScript type).\n\nEach key is a tag name typed in `JSX.IntrinsicElements`,\nif defined.\nEach value is either a different tag name\nor a component accepting the corresponding props\n(and an optional `node` prop if `passNode` is on).\n\nYou can access props at `JSX.IntrinsicElements`.\nFor example,\nto find props for `a`,\nuse `JSX.IntrinsicElements['a']`.\n\n###### Type\n\n```ts\nimport type {Element} from 'hast'\n\ntype ExtraProps = {node?: Element | undefined}\n\ntype Components = {\n  [TagName in keyof JSX.IntrinsicElements]:\n    | Component\u003cJSX.IntrinsicElements[TagName] \u0026 ExtraProps\u003e\n    | keyof JSX.IntrinsicElements\n}\n\ntype Component\u003cComponentProps\u003e =\n  // Class component:\n  | (new (props: ComponentProps) =\u003e JSX.ElementClass)\n  // Function component:\n  | ((props: ComponentProps) =\u003e JSX.Element | string | null | undefined)\n```\n\n### `CreateEvaluater`\n\nCreate an evaluator that turns ESTree ASTs from embedded MDX into values\n(TypeScript type).\n\n###### Parameters\n\nThere are no parameters.\n\n###### Returns\n\nEvaluater ([`Evaluater`][api-evaluater]).\n\n### `ElementAttributeNameCase`\n\nCasing to use for attribute names (TypeScript type).\n\nHTML casing is for example\n`class`, `stroke-linecap`, `xml:lang`.\nReact casing is for example\n`className`, `strokeLinecap`, `xmlLang`.\n\n###### Type\n\n```ts\ntype ElementAttributeNameCase = 'html' | 'react'\n```\n\n### `EvaluateExpression`\n\nTurn an MDX expression into a value (TypeScript type).\n\n###### Parameters\n\n* `expression` (`Expression` from `@types/estree`)\n  — estree expression\n\n###### Returns\n\nResult of expression (`unknown`).\n\n### `EvaluateProgram`\n\nTurn an MDX program (export/import statements) into a value (TypeScript type).\n\n###### Parameters\n\n* `program` (`Program` from `@types/estree`)\n  — estree program\n\n###### Returns\n\nResult of program (`unknown`);\nshould likely be `undefined` as ESM changes the scope but doesn’t yield\nsomething.\n\n### `Evaluater`\n\nEvaluator that turns ESTree ASTs from embedded MDX into values (TypeScript\ntype).\n\n###### Fields\n\n* `evaluateExpression` ([`EvaluateExpression`][api-evaluate-expression])\n  — evaluate an expression\n* `evaluateProgram` ([`EvaluateProgram`][api-evaluate-program])\n  — evaluate a program\n\n### `ExtraProps`\n\nExtra fields we pass (TypeScript type).\n\n###### Type\n\n```ts\ntype ExtraProps = {node?: Element | undefined}\n```\n\n### `Fragment`\n\nRepresent the children,\ntypically a symbol (TypeScript type).\n\n###### Type\n\n```ts\ntype Fragment = unknown\n```\n\n### `Jsx`\n\nCreate a production element (TypeScript type).\n\n###### Parameters\n\n* `type` (`unknown`)\n  — element type:\n  `Fragment` symbol,\n  tag name (`string`),\n  component\n* `props` ([`Props`][api-props])\n  — element props,\n  `children`,\n  and maybe `node`\n* `key` (`string` or `undefined`)\n  — dynamicly generated key to use\n\n###### Returns\n\nElement from your framework\n(`JSX.Element` if defined,\notherwise `unknown` which you can cast yourself).\n\n### `JsxDev`\n\nCreate a development element (TypeScript type).\n\n###### Parameters\n\n* `type` (`unknown`)\n  — element type:\n  `Fragment` symbol,\n  tag name (`string`),\n  component\n* `props` ([`Props`][api-props])\n  — element props,\n  `children`,\n  and maybe `node`\n* `key` (`string` or `undefined`)\n  — dynamicly generated key to use\n* `isStaticChildren` (`boolean`)\n  — whether two or more children are passed (in an array),\n  which is whether `jsxs` or `jsx` would be used\n* `source` ([`Source`][api-source])\n  — info about source\n* `self` (`undefined`)\n  — nothing (this is used by frameworks that have components,\n  we don’t)\n\n###### Returns\n\nElement from your framework\n(`JSX.Element` if defined,\notherwise `unknown` which you can cast yourself).\n\n### `Options`\n\nConfiguration (TypeScript type).\n\n###### Fields\n\n* `Fragment` ([`Fragment`][api-fragment], required)\n  — fragment\n* `jsxDEV` ([`JsxDev`][api-jsx-dev], required in development)\n  — development JSX\n* `jsxs` ([`Jsx`][api-jsx], required in production)\n  — static JSX\n* `jsx` ([`Jsx`][api-jsx], required in production)\n  — dynamic JSX\n* `components` ([`Partial\u003cComponents\u003e`][api-components], optional)\n  — components to use\n* `createEvaluater` ([`CreateEvaluater`][api-create-evaluater], optional)\n  — create an evaluator that turns ESTree ASTs into values\n* `development` (`boolean`, default: `false`)\n  — whether to use `jsxDEV` when on or `jsx` and `jsxs` when off\n* `elementAttributeNameCase`\n  ([`ElementAttributeNameCase`][api-element-attribute-name-case],\n  default: `'react'`)\n  — specify casing to use for attribute names\n* `filePath` (`string`, optional)\n  — file path to the original source file,\n  passed in source info to `jsxDEV` when using the automatic runtime with\n  `development: true`\n* `passNode` (`boolean`, default: `false`)\n  — pass the hast element node to components\n* `space` ([`Space`][api-space], default: `'html'`)\n  — whether `tree` is in the `'html'` or `'svg'` space, when an `\u003csvg\u003e`\n  element is found in the HTML space,\n  this package already automatically switches to and from the SVG space when\n  entering and exiting it\n* `stylePropertyNameCase`\n  ([`StylePropertyNameCase`][api-style-property-name-case],\n  default: `'dom'`)\n  — specify casing to use for property names in `style` objects\n* `tableCellAlignToStyle`\n  (`boolean`, default: `true`)\n  — turn obsolete `align` props on `td` and `th` into CSS `style` props\n\n### `Props`\n\nProperties and children (TypeScript type).\n\n###### Type\n\n```ts\nimport type {Element} from 'hast'\n\ntype Props = {\n  [prop: string]:\n    | Array\u003cJSX.Element | string | null | undefined\u003e // For `children`.\n    | Record\u003cstring, string\u003e // For `style`.\n    | Element // For `node`.\n    | boolean\n    | number\n    | string\n    | undefined\n  children: Array\u003cJSX.Element | string | null | undefined\u003e | undefined\n  node?: Element | undefined\n}\n```\n\n### `Source`\n\nInfo about source (TypeScript type).\n\n###### Fields\n\n* `columnNumber` (`number` or `undefined`)\n  — column where thing starts (0-indexed)\n* `fileName` (`string` or `undefined`)\n  — name of source file\n* `lineNumber` (`number` or `undefined`)\n  — line where thing starts (1-indexed)\n\n### `Space`\n\nNamespace (TypeScript type).\n\n\u003e 👉 **Note**:\n\u003e hast is not XML;\n\u003e it supports SVG as embedded in HTML;\n\u003e it does not support the features available in XML;\n\u003e passing SVG might break but fragments of modern SVG should be fine;\n\u003e use `xast` if you need to support SVG as XML.\n\n###### Type\n\n```ts\ntype Space = 'html' | 'svg'\n```\n\n### `StylePropertyNameCase`\n\nCasing to use for property names in `style` objects (TypeScript type).\n\nCSS casing is for example `background-color` and `-webkit-line-clamp`.\nDOM casing is for example `backgroundColor` and `WebkitLineClamp`.\n\n###### Type\n\n```ts\ntype StylePropertyNameCase = 'css' | 'dom'\n```\n\n## Errors\n\nThe following errors are thrown:\n\n###### ``Expected `Fragment` in options``\n\nThis error is thrown when either `options` is not passed at all or\nwhen `options.Fragment` is `undefined`.\n\nThe automatic JSX runtime needs a symbol for a fragment to work.\n\nTo solve the error,\nmake sure you are passing the correct fragment symbol from your framework.\n\n###### `` Expected `jsxDEV` in options when `development: true` ``\n\nThis error is thrown when `options.development` is turned on (`true`),\nbut when `options.jsxDEV` is not a function.\n\nThe automatic JSX runtime,\nin development,\nneeds this function.\n\nTo solve the error,\nmake sure you are importing the correct runtime functions\n(for example, `'react/jsx-dev-runtime'`),\nand pass `jsxDEV`.\n\n###### ``Expected `jsx` in production options``\n\n###### ``Expected `jsxs` in production options``\n\nThese errors are thrown when `options.development` is *not* turned on\n(`false` or not defined),\nand when `options.jsx` or `options.jsxs` are not functions.\n\nThe automatic JSX runtime,\nin production,\nneeds these functions.\n\nTo solve the error,\nmake sure you are importing the correct runtime functions\n(for example, `'react/jsx-runtime'`),\nand pass `jsx` and `jsxs`.\n\n###### `` Cannot handle MDX estrees without `createEvaluater` ``\n\nThis error is thrown when MDX nodes are passed that represent JavaScript\nprograms or expressions.\n\nSupporting JavaScript can be unsafe and requires a different project.\nTo support JavaScript,\npass a `createEvaluater` function in `options`.\n\n###### ``Cannot parse `style` attribute``\n\nThis error is thrown when a `style` attribute is found on an element,\nwhich cannot be parsed as CSS.\n\nMost frameworks don’t accept `style` as a string,\nso we need to parse it as CSS,\nand pass it as an object.\nBut when broken CSS is used,\nsuch as `style=\"color:red; /*\"`,\nwe crash.\n\nTo solve the error,\nmake sure authors write valid CSS.\nAlternatively,\npass `options.ignoreInvalidStyle: true` to swallow these errors.\n\n## Examples\n\n### Example: Preact\n\n\u003e 👉 **Note**:\n\u003e you must set `elementAttributeNameCase: 'html'` for preact.\n\nIn Node.js,\ndo:\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'preact/jsx-runtime'\nimport {render} from 'preact-render-to-string'\n\nconst result = render(\n  toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html'\n  })\n)\n\nconsole.log(result)\n```\n\nYields:\n\n```html\n\u003ch1\u003ehi!\u003c/h1\u003e\n```\n\nIn a browser,\ndo:\n\n```js\nimport {h} from 'https://esm.sh/hastscript@9'\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\nimport {Fragment, jsx, jsxs} from 'https://esm.sh/preact@10/jsx-runtime'\nimport {render} from 'https://esm.sh/preact@10'\n\nrender(\n  toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html'\n  }),\n  document.getElementById('root')\n)\n```\n\nTo add better type support,\nregister a global JSX namespace:\n\n```ts\nimport type {JSX as Jsx} from 'preact/jsx-runtime'\n\ndeclare global {\n  namespace JSX {\n    type ElementClass = Jsx.ElementClass\n    type Element = Jsx.Element\n    type IntrinsicElements = Jsx.IntrinsicElements\n  }\n}\n```\n\n### Example: Solid\n\n\u003e 👉 **Note**:\n\u003e you must set `elementAttributeNameCase: 'html'` and\n\u003e `stylePropertyNameCase: 'css'` for Solid.\n\nIn Node.js,\ndo:\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'solid-jsx/jsx-runtime'\n\nconsole.log(\n  toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html',\n    stylePropertyNameCase: 'css'\n  }).t\n)\n```\n\nYields:\n\n```html\n\u003ch1 \u003ehi!\u003c/h1\u003e\n```\n\nIn a browser,\ndo:\n\n```js\nimport {h} from 'https://esm.sh/hastscript@9'\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\nimport {Fragment, jsx, jsxs} from 'https://esm.sh/solid-js@1/h/jsx-runtime'\nimport {render} from 'https://esm.sh/solid-js@1/web'\n\nrender(Component, document.getElementById('root'))\n\nfunction Component() {\n  return toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html',\n    stylePropertyNameCase: 'css'\n  })\n}\n```\n\nTo add better type support,\nregister a global JSX namespace:\n\n```ts\nimport type {JSX as Jsx} from 'solid-js/jsx-runtime'\n\ndeclare global {\n  namespace JSX {\n    type ElementClass = Jsx.ElementClass\n    type Element = Jsx.Element\n    type IntrinsicElements = Jsx.IntrinsicElements\n  }\n}\n```\n\n### Example: Svelte\n\n\u003c!-- To do: improve svelte when it fixes a bunch of bugs. --\u003e\n\nI have no clue how to render a Svelte component in Node,\nbut you can get that component with:\n\n```js\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'svelte-jsx'\n\nconst svelteComponent = toJsxRuntime(h('h1', 'hi!'), {Fragment, jsx, jsxs})\n\nconsole.log(svelteComponent)\n```\n\nYields:\n\n```text\n[class Component extends SvelteComponent]\n```\n\nTypes for Svelte are broken.\nRaise it with Svelte.\n\n### Example: Vue\n\n\u003e 👉 **Note**:\n\u003e you must set `elementAttributeNameCase: 'html'` for Vue.\n\nIn Node.js,\ndo:\n\n```js\nimport serverRenderer from '@vue/server-renderer'\nimport {h} from 'hastscript'\nimport {toJsxRuntime} from 'hast-util-to-jsx-runtime'\nimport {Fragment, jsx, jsxs} from 'vue/jsx-runtime' // Available since `vue@3.3`.\n\nconsole.log(\n  await serverRenderer.renderToString(\n    toJsxRuntime(h('h1', 'hi!'), {\n      Fragment,\n      jsx,\n      jsxs,\n      elementAttributeNameCase: 'html'\n    })\n  )\n)\n```\n\nYields:\n\n```html\n\u003ch1\u003ehi!\u003c/h1\u003e\n```\n\nIn a browser,\ndo:\n\n```js\nimport {h} from 'https://esm.sh/hastscript@9'\nimport {toJsxRuntime} from 'https://esm.sh/hast-util-to-jsx-runtime@2'\nimport {createApp} from 'https://esm.sh/vue@3'\nimport {Fragment, jsx, jsxs} from 'https://esm.sh/vue@3/jsx-runtime'\n\ncreateApp(Component).mount('#root')\n\nfunction Component() {\n  return toJsxRuntime(h('h1', 'hi!'), {\n    Fragment,\n    jsx,\n    jsxs,\n    elementAttributeNameCase: 'html'\n  })\n}\n```\n\nTo add better type support,\nregister a global JSX namespace:\n\n```ts\nimport type {JSX as Jsx} from 'vue/jsx-runtime'\n\ndeclare global {\n  namespace JSX {\n    type ElementClass = Jsx.ElementClass\n    type Element = Jsx.Element\n    type IntrinsicElements = Jsx.IntrinsicElements\n  }\n}\n```\n\n## Syntax\n\nHTML is parsed according to WHATWG HTML (the living standard),\nwhich is also followed by browsers such as Chrome,\nFirefox,\nand Safari.\n\n## Compatibility\n\nProjects maintained by the unified collective are compatible with maintained\nversions of Node.js.\n\nWhen we cut a new major release,\nwe drop support for unmaintained versions of Node.\nThis means we try to keep the current release line,\n`hast-util-to-jsx-runtime@2`,\ncompatible with Node.js 16.\n\n## Security\n\nBe careful with user input in your hast tree.\nUse [`hast-util-santize`][github-hast-util-sanitize] to make hast trees safe.\n\n## Related\n\n* [`hastscript`](https://github.com/syntax-tree/hastscript)\n  — build hast trees\n* [`hast-util-to-html`](https://github.com/syntax-tree/hast-util-to-html)\n  — serialize hast as HTML\n* [`hast-util-sanitize`][github-hast-util-sanitize]\n  — sanitize hast\n\n## Contribute\n\nSee [`contributing.md`][health-contributing]\nin\n[`syntax-tree/.github`][health]\nfor ways to get started.\nSee [`support.md`][health-support] for ways to get help.\n\nThis project has a [code of conduct][health-coc].\nBy interacting with this repository,\norganization,\nor community you agree to abide by its terms.\n\n## License\n\n[MIT][file-license] © [Titus Wormer][wooorm]\n\n\u003c!-- Definitions --\u003e\n\n[api-components]: #components\n\n[api-create-evaluater]: #createevaluater\n\n[api-element-attribute-name-case]: #elementattributenamecase\n\n[api-evaluate-expression]: #evaluateexpression\n\n[api-evaluate-program]: #evaluateprogram\n\n[api-evaluater]: #evaluater\n\n[api-extra-props]: #extraprops\n\n[api-fragment]: #fragment\n\n[api-jsx]: #jsx\n\n[api-jsx-dev]: #jsxdev\n\n[api-options]: #options\n\n[api-props]: #props\n\n[api-source]: #source\n\n[api-space]: #space\n\n[api-style-property-name-case]: #stylepropertynamecase\n\n[api-to-jsx-runtime]: #tojsxruntimetree-options\n\n[badge-build-image]: https://github.com/syntax-tree/hast-util-to-jsx-runtime/workflows/main/badge.svg\n\n[badge-build-url]: https://github.com/syntax-tree/hast-util-to-jsx-runtime/actions\n\n[badge-coverage-image]: https://img.shields.io/codecov/c/github/syntax-tree/hast-util-to-jsx-runtime.svg\n\n[badge-coverage-url]: https://codecov.io/github/syntax-tree/hast-util-to-jsx-runtime\n\n[badge-downloads-image]: https://img.shields.io/npm/dm/hast-util-to-jsx-runtime.svg\n\n[badge-downloads-url]: https://www.npmjs.com/package/hast-util-to-jsx-runtime\n\n[badge-size-image]: https://img.shields.io/bundlejs/size/hast-util-to-jsx-runtime\n\n[badge-size-url]: https://bundlejs.com/?q=hast-util-to-jsx-runtime\n\n[esmsh]: https://esm.sh\n\n[file-license]: license\n\n[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c\n\n[github-hast]: https://github.com/syntax-tree/hast\n\n[github-hast-nodes]: https://github.com/syntax-tree/hast#nodes\n\n[github-hast-util-sanitize]: https://github.com/syntax-tree/hast-util-sanitize\n\n[health]: https://github.com/syntax-tree/.github\n\n[health-coc]: https://github.com/syntax-tree/.github/blob/main/code-of-conduct.md\n\n[health-contributing]: https://github.com/syntax-tree/.github/blob/main/contributing.md\n\n[health-support]: https://github.com/syntax-tree/.github/blob/main/support.md\n\n[npmjs-install]: https://docs.npmjs.com/cli/install\n\n[reactjs-jsx-runtime]: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html\n\n[typescript]: https://www.typescriptlang.org\n\n[wooorm]: https://wooorm.com\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntax-tree%2Fhast-util-to-jsx-runtime","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyntax-tree%2Fhast-util-to-jsx-runtime","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyntax-tree%2Fhast-util-to-jsx-runtime/lists"}