Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 109 Commits
.github/workflows		.github/workflows
packages		packages
.eslintignore		.eslintignore
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
license		license
package.json		package.json
readme.md		readme.md
test.js		test.js
tsconfig.json		tsconfig.json

Repository files navigation

rehype-dom

This project is a monorepo that contains alternatives torehype for use inbrowsers.

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) inbrowsers
rehype-dom-stringify— plugin to take a syntax tree (hast) and turn it into HTML as output inbrowsers
rehype-dom—unified,rehype-dom-parse, andrehype-dom-stringify, useful wheninput 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 torehype itself as it usesDOM APIs to do its work.However, DOM APIs:

…cannot provide positional information (each node knowing where itoriginated), which is frequently needed when working with rehype
…do not have formatting options thatrehype-stringify exposes
…can provide varying results in different (especially older) browsers
…are safe, but untrusted HTML in browsers is always unsafe

Example

Say our pageexample.html looks as follows:

<!doctype html><title>Example</title><body><scripttype="module">import{rehypeDom}from'https://esm.sh/rehype-dom@7?bundle'constfile=awaitrehypeDom().process('<h1>Hi <del>Mars</del>Venus!</h1>')document.body.innerHTML=String(file)</script>

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

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

Security

Use ofrehype-dom can open you up to across-site scripting (XSS)attack if dangerous content is used and the result is used with the actual DOM.Userehype-sanitize to solve that.