https://github.com/leodr/html-to-jsx-transform
A library for converting an HTML string into a JSX string using ASTs.
https://github.com/leodr/html-to-jsx-transform
html html-to-jsx jsx react transformer
Last synced: about 1 year ago
JSON representation
A library for converting an HTML string into a JSX string using ASTs.
- Host: GitHub
- URL: https://github.com/leodr/html-to-jsx-transform
- Owner: leodr
- License: mit
- Created: 2022-09-12T22:31:43.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2025-05-23T11:47:00.000Z (about 1 year ago)
- Last Synced: 2025-06-06T01:23:26.311Z (about 1 year ago)
- Topics: html, html-to-jsx, jsx, react, transformer
- Language: TypeScript
- Homepage:
- Size: 627 KB
- Stars: 18
- Watchers: 2
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
html-to-jsx-transform
A library for converting an HTML string into a JSX string using ASTs.
Documentation
•
Development
•
Contribute
---
`html-to-jsx-transform` transforms a string of HTML into JSX. It works by
turning it into an AST using [`parse5`](https://parse5.js.org/index.html),
converting every node to its equivalent JSX node to create a Babel AST and then
stringifying that using
[`@babel/generator`](https://babeljs.io/docs/en/babel-generator).
The library is tested for a variety of different scenarios, if you happen to
find a flaw please open an issue so we can add it to the test suite.
## ❯ Documentation
- [`htmlToJsx`](#htmlToJsx)
### `htmlToJsx`
Takes a string of HTML and synchronously returns a string with the equivalent
JSX source code.
#### Example
```ts
import { htmlToJsx } from "html-to-jsx-transform";
const jsx = htmlToJsx('
Hello World!
');
// jsx === '
Hello World!
';
```
#### Behavior
##### Elements
- `style` and `script` elements get template literal bodies wrapped in curly
braces
- Adjacent elements are wrapped in a Fragment (`<>...>`)
##### Attributes
- `style` attributes are parsed into objects
- Attributes are renamed and casing is adjusted (including SVG)
- Event handlers are converted into arrow functions
- Boolean and numeric attributes are converted into boolean or number values
## ❯ Development
This library is best developed by writing test cases first. Tests can be
executed by running `npm test`.
### Releasing a new version on NPM
To release a new version on npm, run `npm version (patch|minor|major)` to
increase the version. This will create a Git tag for you.
Then run `npm publish`, the `prepublishOnly` hook will test and build the
package and then publish it.
## ❯ Contribute
If you think you have any ideas that could benefit the project, feel free to
create an issue or pull request!
---
Project by Leo Driesch, released under MIT license.
