rehypejs/rehype-dom

HTML processor to parse and compile with browser APIs, powered by plugins

25

stars

109

commits

JavaScript

primary language

Dec 9, 2024

updated

unifiedjs.com
ast
browser
dom
html
javascript
rehype
rehype-plugin
unified
Browse cluster: Rehype HTML Processing Plugins

README

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

Contributors

wooorm

89 commits

kmck

13 commits

aguingand

1 commits

rehypejs/rehype-dom

HTML processor to parse and compile with browser APIs, powered by plugins

25

stars

109

commits

JavaScript

primary language

Dec 9, 2024

updated

unifiedjs.com
ast
browser
dom
html
javascript
rehype
rehype-plugin
unified
Browse cluster: Rehype HTML Processing Plugins

README

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

Contributors

wooorm

89 commits

kmck

13 commits

aguingand

1 commits

Languages

JavaScript

100.0%