Skip to content

rehypejs/rehype-dom

Repository files navigation

rehype-dom

Build Coverage Downloads Size Sponsors Backers Chat

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

ISC © Keith McKnight