Awesome

rehype-dom

This project is a monorepo that contains alternatives to rehype for use in browsers.

What is this?
When should I use this?
Example
Security
Contribute
License

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 browsers
rehype-dom-stringify — plugin to take a syntax tree (hast) and turn it into HTML as output in browsers
rehype-dom — unified, rehype-dom-parse, and rehype-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-stringify exposes
…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@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>

Security

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.

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.

License