#BlackLivesMatter

unified

Project: rehypejs/rehype-dom

Package: rehype-dom@6.0.1

  1. Dependents: 0
  2. unified processor to use browser APIs to parse and stringify HTML
  1. 65%
  3. ISC
  4. 20
  1. 12.1 kB
  2. 823
  1. unified 175
  2. html 123
  3. rehype 89
  4. tree 37
  5. ast 35
  6. syntax 21
  7. parse 18
  8. stringify 16
  9. compile 13
  10. abstract 9
  11. dom 8
  12. process 5

rehype-dom

Build Coverage Downloads Size Sponsors Backers Chat

unified processor with support for parsing HTML input and serializing HTML as output.

Contents

What is this?

This is like rehype but for browsers.

When should I use this?

Use this package when you want to use rehype in browsers. See the monorepo readme for info on when to use rehype-dom.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install rehype-dom

In Deno with esm.sh:

import {rehypeDom} from 'https://esm.sh/rehype-dom@6'

In browsers with esm.sh:

<script type="module">
  import {rehypeDom} from 'https://esm.sh/rehype-dom@6?bundle'
</script>

Use

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>

API

This package exports the following identifier: rehypeDom. There is no default export.

rehypeDom()

Create a new (unfrozen) unified processor that already uses rehype-dom-parse and rehype-dom-stringify and you can add more plugins to. See unified for more information.

👉 Note: the default of the fragment option is true in this package, which is different from the value in rehype, because it makes more sense in browsers.

Examples

Example: passing options

When you use remark-dom-parse and remark-dom-stringify manually you can pass options to use. Because these are already used in rehype-dom, that’s not possible. To define options for them, you can instead pass options to data:

import {rehypeDom} from 'https://esm.sh/rehype-dom@6?bundle'

const file = await rehypeDom()
  .data('settings', {fragment: false})
  .process('<!doctype html>' + document.documentElement.outerHTML)

console.log(String(file))

Types

This package is fully typed with TypeScript. There are no extra exported types.

Compatibility

Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.

Security

Use of rehype-dom can open you up to a cross-site scripting (XSS) attack if 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