# recma-jsx

> recma plugin to add support for parsing and serializing JSX

Latest version **1.0.1** (published 2025-07-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install recma-jsx
pnpm add recma-jsx
yarn add recma-jsx
bun add recma-jsx
```

## Health

**Score 35/100 (D)** — status: maintenance-mode.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2025-07-28 |
| First published | 2024-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 5 |
| Unpacked size | 8.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 24 |
| Author | Titus Wormer |
| Maintainers | johno, timneutkens, wooorm, remcohaszing |
| Keywords | abstract, ast, compile, javascript, jsx, plugin, recma-plugin, recma, syntax, tree, unified |

## Links

- npm: https://www.npmjs.com/package/recma-jsx
- Repository: https://github.com/mdx-js/recma.git#main
- Homepage: https://github.com/mdx-js/recma
- Issues: https://github.com/mdx-js/recma/issues
- Funding: https://opencollective.com/unified
- npm.io page: https://npm.io/package/recma-jsx

## Dependencies (5)

- [unified](https://npm.io/package/unified.md) ^11.0.0
- [acorn-jsx](https://npm.io/package/acorn-jsx.md) ^5.0.0
- [recma-parse](https://npm.io/package/recma-parse.md) ^1.0.0
- [recma-stringify](https://npm.io/package/recma-stringify.md) ^1.0.0
- [estree-util-to-js](https://npm.io/package/estree-util-to-js.md) ^2.0.0

## Alternatives

- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2025-07-28
- 1.0.0 — 2024-10-18

## README

# recma-jsx

[![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]
[![Sponsors][badge-sponsors-image]][badge-collective-url]
[![Backers][badge-backers-image]][badge-collective-url]
[![Chat][badge-chat-image]][badge-chat-url]

**[recma][github-recma]** plugin to add support for parsing and serializing
[JSX][github-io-jsx].

## Contents

* [What is this?](#what-is-this)
* [When should I use this?](#when-should-i-use-this)
* [Install](#install)
* [Use](#use)
* [API](#api)
  * [`unified().use(recmaJsx)`](#unifieduserecmajsx)
* [Syntax](#syntax)
* [Syntax tree](#syntax-tree)
* [Types](#types)
* [Compatibility](#compatibility)
* [Security](#security)
* [Contribute](#contribute)
* [License](#license)

## What is this?

This package is a [unified][github-unified]
([recma][github-recma])
that enables JSX.
You can use this plugin to add support for parsing and serializing it.

## When should I use this?

You can use this if you want to use `recma` and JSX.
You can also use [`acorn-jsx`][github-acorn-jsx] manually with
[`acorn`][github-acorn] for parsing.
And use the [`jsx`][github-estree-util-to-js-jsx] handlers from
[`estree-util-to-js`][github-estree-util-to-js] manually.

## Install

This package is [ESM only][github-gist-esm].
In Node.js (version 16+),
install with [npm][npm-install]:

```sh
npm install recma-jsx
```

In Deno with [`esm.sh`][esmsh]:

```js
import recmaJsx from 'https://esm.sh/recma-jsx@1'
```

In browsers with [`esm.sh`][esmsh]:

```html
<script type="module">
  import recmaJsx from 'https://esm.sh/recma-jsx@1?bundle'
</script>
```

## Use

Say we have the following module `example.js`:

```js
import recmaJsx from 'recma-jsx'
import recmaParse from 'recma-parse'
import recmaStringify from 'recma-stringify'
import {unified} from 'unified'

const file = await unified()
  .use(recmaParse)
  .use(recmaJsx)
  .use(recmaStringify)
  .process('console.log(<em>Hi!</em>)')

console.log(String(file))
```

…running that with `node example.js` yields:

```js
console.log(<em>Hi!</em>);
```

## API

This package exports no identifiers.
The default export is [`recmaJsx`][api-recma-jsx].

### `unified().use(recmaJsx)`

Plugin to add support for parsing and serializing JSX.

###### Parameters

There are no parameters.

###### Returns

Nothing (`undefined`).

## Syntax

JSX is parsed and serialized according to [`facebook/jsx`][github-io-jsx].

## Syntax tree

The syntax tree format used in recma is [esast][github-esast] and
[estree][github-estree].

## Types

This package is fully typed with [TypeScript][].
It exports no additional types.

## 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,
`recma-jsx@1`,
compatible with Node.js 16.

## Security

As **recma** works on JS and evaluating JS is unsafe,
use of recma can also be unsafe.
Do not evaluate unsafe code.

## Contribute

See [§ Contribute][mdxjs-contribute] on our site for ways to get started.
See [§ Support][mdxjs-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]

<!-- Definitions -->

[api-recma-jsx]: #unifieduserecmajsx

[badge-backers-image]: https://opencollective.com/unified/backers/badge.svg

[badge-build-image]: https://github.com/mdx-js/recma/actions/workflows/main.yml/badge.svg

[badge-build-url]: https://github.com/mdx-js/recma/actions

[badge-chat-image]: https://img.shields.io/badge/chat-discussions-success.svg

[badge-chat-url]: https://github.com/mdx-js/mdx/discussions

[badge-collective-url]: https://opencollective.com/unified

[badge-coverage-image]: https://img.shields.io/codecov/c/github/mdx-js/recma.svg

[badge-coverage-url]: https://codecov.io/github/mdx-js/recma

[badge-downloads-image]: https://img.shields.io/npm/dm/recma-jsx.svg

[badge-downloads-url]: https://www.npmjs.com/package/recma-jsx

[badge-size-image]: https://img.shields.io/bundlejs/size/recma-jsx

[badge-size-url]: https://bundlejs.com/?q=recma-jsx

[badge-sponsors-image]: https://opencollective.com/unified/sponsors/badge.svg

[esmsh]: https://esm.sh

[file-license]: license

[github-acorn]: https://github.com/acornjs/acorn

[github-acorn-jsx]: https://github.com/acornjs/acorn-jsx

[github-esast]: https://github.com/syntax-tree/esast

[github-estree]: https://github.com/estree/estree

[github-estree-util-to-js]: https://github.com/syntax-tree/estree-util-to-js

[github-estree-util-to-js-jsx]: https://github.com/syntax-tree/estree-util-to-js#jsx

[github-gist-esm]: https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c

[github-io-jsx]: http://facebook.github.io/jsx/

[github-recma]: https://github.com/mdx-js/recma

[github-unified]: https://github.com/unifiedjs/unified

[health-coc]: https://github.com/mdx-js/.github/blob/main/code-of-conduct.md

[mdxjs-contribute]: https://mdxjs.com/community/contribute/

[mdxjs-support]: https://mdxjs.com/community/support/

[npm-install]: https://docs.npmjs.com/cli/install

[typescript]: https://www.typescriptlang.org

[wooorm]: https://wooorm.com

---
_Source: https://npm.io/package/recma-jsx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._