This project is a monorepo that contains alternatives to rehype for use in browsers.
This monorepo contains the following packages:
rehype-dom-parse
— plugin to take HTML as input and turn it into a syntax tree (hast) in browsersrehype-dom-stringify
— plugin to take a syntax tree (hast) and turn it into HTML as output in browsersrehype-dom
—unified
,rehype-dom-parse
, andrehype-dom-stringify
, useful when input and output are HTML
You can use this project when you want to use rehype in browsers.
It has a smaller footprint in browsers compared to rehype
itself as it uses
DOM APIs to do its work.
However, DOM APIs:
- …cannot provide positional information (each node knowing where it originated), which is frequently needed when working with rehype
- …do not have formatting options that
rehype-stringify
exposes - …can provide varying results in different (especially older) browsers
- …are safe, but untrusted HTML in browsers is always unsafe
Say our page example.html
looks as follows:
<!doctype html>
<title>Example</title>
<body>
<script type="module">
import {rehypeDom} from 'https://esm.sh/rehype-dom@7?bundle'
const file = await rehypeDom().process('<h1>Hi <del>Mars</del>Venus!</h1>')
document.body.innerHTML = String(file)
</script>
Now running open example.html
renders the following in <body>
:
<h1>Hi <del>Mars</del>Venus!</h1>
Use of rehype-dom
can open you up to a cross-site scripting (XSS)
attack if dangerous content is used and the result is used with the actual DOM.
Use rehype-sanitize
to solve that.
See contributing.md
in rehypejs/.github
for ways
to get started.
See support.md
for ways to get help.
This project has a code of conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.