# @web/parse5-utils

> Utils for using parse5

Latest version **3.0.0** (published 2026-07-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @web/parse5-utils
pnpm add @web/parse5-utils
yarn add @web/parse5-utils
bun add @web/parse5-utils
```

## Health

**Score 65/100 (B)** — status: active.

Positive: esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; no types.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2026-07-07 |
| First published | 2020-10-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=22.0.0 |
| Dependencies | 2 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 2451 |
| Author | modern-web |
| Maintainers | d4kmor, passle, jorenbroekema, bennyp, larsdenbakker, westbrook, modern-web |
| Keywords | web, node, parse5, utils |

## Links

- npm: https://www.npmjs.com/package/@web/parse5-utils
- Repository: https://github.com/modernweb-dev/web
- Homepage: https://github.com/modernweb-dev/web/tree/master/packages/parse5-utils
- Issues: https://github.com/modernweb-dev/web/issues
- npm.io page: https://npm.io/package/@web/parse5-utils

## Dependencies (2)

- [parse5](https://npm.io/package/parse5.md) ^6.0.1
- [@types/parse5](https://npm.io/package/@types/parse5.md) ^6.0.1

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 3.0.0 (latest) — 2026-07-07
- 0.0.0-canary-20240219104536 (canary) — 2024-02-19
- 2.1.1 — 2026-01-20
- 0.0.0-canary-20240219104126 — 2024-02-19
- 0.0.0-canary-20240212171943 — 2024-02-12
- 0.0.0-canary-20240105101412 — 2024-01-05
- 0.0.0-canary-20240105095248 — 2024-01-05
- 0.0.0-canary-20240105093823 — 2024-01-05
- 0.0.0-canary-20240105092607 — 2024-01-05
- 0.0.0-canary-20240105091725 — 2024-01-05
- 0.0.0-canary-20231122093600 — 2023-11-22
- 2.1.0 — 2023-11-01
- 2.0.2 — 2023-10-19
- 2.0.1 — 2023-08-14
- 2.0.0 — 2023-04-21
- … 15 more at https://npm.io/package/@web/parse5-utils/versions

## README

# parse5-utils

Utils for using parse5.

## Usage

Examples:

```js
import { parse } from 'parse5';
import { createElement, getTagName, appendChild, findElement } from '@web/parse5-utils';

const doc = parse(`
  <html>
    <body>
      <my-element></my-element>
      <div id="foo"></div>
    </body>
  </html>`);

const body = findElement(doc, e => getTagName(e) === 'body');
const script = createElement('script', { src: './foo.js' });
appendChild(body, script);
```

```js
import { parse } from 'parse5';
import { getTagName, getAttribute, findElements } from '@web/parse5-utils';

const doc = parse(`
  <html>
    <body>
      <script src="./a.js"></script>
      <script type="module" src="./b.js"></script>
      <script type="module" src="./c.js"></script>
    </body>
  </html>`);

const allModuleScripts = findElements(
  doc,
  e => getTagName(e) === 'script' && getAttribute(e, 'type') === 'module',
);
```

`appendToDocument` and `prependToDocument` will inject a snippet of HTML into the page, making sure it is executed last or first respectively.

It tries to avoid changing the formatting of the original file, using parse5 to find out the location of `body` and `head` tags and string concatenation in the original code to do the actual injection. In case of incomplete or invalid HTML it may fall back parse5 to generate a valid document and inject using AST manipulation.

```js
import { prependToDocument, appendToDocument } from '@web/parse5-utils';

const html = '<html><body></body></html>';
const htmlWithInjectedScript = appendToDocument(
  html,
  '<scrip type="module" src="./injected-script.js"></script>',
);
```

## Available functions

- createDocument
- createDocumentFragment
- createElement
- createScript
- createCommentNode
- appendChild
- insertBefore
- setTemplateContent
- getTemplateContent
- setDocumentType
- setDocumentMode
- getDocumentMode
- detachNode
- insertText
- insertTextBefore
- adoptAttributes
- getFirstChild
- getChildNodes
- getParentNode
- getAttrList
- getTagName
- getNamespaceURI
- getTextNodeContent
- getCommentNodeContent
- getDocumentTypeNodeName
- getDocumentTypeNodePublicId
- getDocumentTypeNodeSystemId
- isTextNode
- isCommentNode
- isDocumentTypeNode
- isElementNode
- setNodeSourceCodeLocation
- getNodeSourceCodeLocation
- updateNodeSourceCodeLocation
- isHtmlFragment
- hasAttribute
- getAttribute
- getAttributes
- setAttribute
- setAttributes
- removeAttribute
- setTextContent
- getTextContent
- remove
- findNode
- findNodes
- findElement
- findElements
- prepend
- prependToDocument
- appendToDocument

---
_Source: https://npm.io/package/@web/parse5-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
