rehype

The rehype ecosystem contains a wide variety of plugins for transforming HTML. You can find a curated list of high-quality projects in the awesome-rehype repository or search for the rehype-plugin topic on GitHub.

Important Distinction:

• rehype plugins work with HTML.
• remark plugins work with markdown.

If you are looking for markdown transformations, you should consult the remark plugin list instead.

rehype is an ecosystem of plugins that transform HTML using an Abstract Syntax Tree (AST) called hast (HTML AST). Plugins inspect and modify this tree to change the structure or content of HTML. It is built on top of the unified project, which provides the core transformation engine.

Key components:

• rehype: Adds HTML support to the unified ecosystem.
• hast: The specific HTML AST format used by rehype.
• Plugins: Programs that inspect or change the hast tree.

When creating new tools for the ecosystem, use the following prefixing conventions to ensure users understand the scope of your tool:

• rehype-: Use this prefix if the tool is a plugin that works with rehype().use().
• hast-util-: Use this prefix if the tool is a utility that works specifically with the hast (HTML) syntax tree.
• unist-util-: Use this prefix if the tool is a utility that works with any unist syntax tree.
• vfile-: Use this prefix if the tool is a utility that works with virtual files (vfile).

Warning: Do not use the rehype- prefix if your tool does not work with rehype().use(), as this will confuse users.

Install rehype-stringify via npm for Node.js (version 16+). Note that this package is ESM only.

In Deno, use esm.sh:

import rehypeStringify from 'https://esm.sh/rehype-stringify@10'

In browsers, use esm.sh with a module script:

<script type="module">
  import rehypeStringify from 'https://esm.sh/rehype-stringify@10?bundle'
</script>

npm install rehype-stringify

Install rehype-cli using npm. Note that this package is ESM only and requires Node.js version 16 or higher.

npm install rehype-cli

Install rehype-parse via npm for Node.js (version 16+). Note that this package is ESM only.

In Deno, use esm.sh:

import rehypeParse from 'https://esm.sh/rehype-parse@9'

In browsers, use esm.sh with the ?bundle query:

<script type="module">
  import rehypeParse from 'https://esm.sh/rehype-parse@9?bundle'
</script>

npm install rehype-parse

To create a new plugin, follow these steps:

1. Understand the concept of plugins.
2. Follow the guide on "Creating a plugin with unified".
3. Study an existing plugin to understand its structure.

Best practices for publishing:

• Use default exports to expose your plugins from your package.
• Add the rehype-plugin keyword to your package.json.
• Add a rehype-plugin topic to your GitHub repository.

Install rehype via npm for Node.js (version 16+). Note that this package is ESM only.

For Deno or browser environments, use esm.sh to import the package.

npm install rehype