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. 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


Build Coverage Downloads Size Sponsors Backers Chat

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


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.


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'


Say our page example.html looks as follows:

<!doctype html>
<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)

Now running open example.html renders the following in <body>:

<h1>Hi <del>Mars</del>Venus!</h1>


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


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.


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)



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


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.


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.


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.


ISC © Keith McKnight