rehype-dom
This project is a monorepo that contains alternatives to rehype for use in browsers.
Contents
What is this?
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
When should I use this?
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-stringifyexposes - …can provide varying results in different (especially older) browsers
- …are safe, but untrusted HTML in browsers is always unsafe
Example
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@6?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>Security
Use of rehype-dom can open you up to a cross-site scripting (XSS)
attack if the document is unsafe or unsafe plugins are used.
Use rehype-sanitize to make the tree safe.
Contribute
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.