# hast-util-to-estree [![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][github-hast] utility to transform to [estree][github-estree] (JSX). ## Contents * [What is this?](#what-is-this) * [When should I use this?](#when-should-i-use-this) * [Install](#install) * [Use](#use) * [API](#api) * [`toEstree(tree[, options])`](#toestreetree-options) * [`defaultHandlers`](#defaulthandlers) * [`ElementAttributeNameCase`](#elementattributenamecase) * [`Handle`](#handle) * [`Options`](#options) * [`Space`](#space) * [`State`](#state) * [`StylePropertyNameCase`](#stylepropertynamecase) * [Types](#types) * [Compatibility](#compatibility) * [Security](#security) * [Related](#related) * [Contribute](#contribute) * [License](#license) ## What is this? This package is a utility that takes a [hast][github-hast] (HTML) syntax tree as input and turns it into an [estree][github-estree] (JavaScript) syntax tree (with a JSX extension). This package also supports embedded MDX nodes. ## When should I use this? This project is useful when you want to embed HTML as JSX inside JS while working with syntax trees. This is used in [MDX][mdxjs]. ## 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-estree ``` In Deno with [`esm.sh`][esmsh]: ```js import {toEstree} from 'https://esm.sh/hast-util-to-estree@3' ``` In browsers with [`esm.sh`][esmsh]: ```html ``` ## Use Say our module `example.html` contains: ```html Hi!

Hello, world!

``` …and our module `example.js` looks as follows: ```js import fs from 'node:fs/promises' import {jsx, toJs} from 'estree-util-to-js' import {fromHtml} from 'hast-util-from-html' import {toEstree} from 'hast-util-to-estree' const hast = fromHtml(await fs.readFile('example.html')) const estree = toEstree(hast) console.log(toJs(estree, {handlers: jsx}).value) ``` …now running `node example.js` (and prettier) yields: ```js /* Commentz */ ;<> {'Hi!'} {'\n'} {'\n'}

{'Hello, world!'}

{'\n'} {'\n'} {} {'\n'}

c	File Name	Size	T	Date
zip	lib/	9	---	2025-08-12 18:35:07
-	index.d.ts	537	ts	2025-08-12 10:28:31
-	index.d.ts.map	275	map	2025-08-12 10:28:30
-	index.js	499	js	2025-08-12 10:28:30
-	license	1094	%	2025-08-12 10:28:30
-	package.json	3107	json	2025-08-12 10:28:30
-	readme.md	12868	md	2025-08-12 10:28:31

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

control-panel