# data-urls

> Parses data: URLs

Latest version **7.0.0** (published 2026-02-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install data-urls
pnpm add data-urls
yarn add data-urls
bun add data-urls
```

## Health

**Score 58/100 (C)** — status: stable.

Positive: has types package; no vulnerabilities; has provenance; high quality score.

Warnings: low downloads; no esm support.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2026-02-02 |
| First published | 2018-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/data-urls) |
| Module format | CommonJS |
| Node | ^20.19.0 \|\| ^22.12.0 \|\| >=24.0.0 |
| Dependencies | 2 |
| Unpacked size | 8.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 75 |
| Author | Domenic Denicola |
| Maintainers | timothygu, domenic, sebmaster, zirro, tmpvar, joris-van-der-wel |
| Keywords | data url, data uri, data:, http, fetch, whatwg |

## Links

- npm: https://www.npmjs.com/package/data-urls
- Repository: https://github.com/jsdom/data-urls
- Homepage: https://github.com/jsdom/data-urls#readme
- Issues: https://github.com/jsdom/data-urls/issues
- npm.io page: https://npm.io/package/data-urls

## Dependencies (2)

- [whatwg-url](https://npm.io/package/whatwg-url.md) ^16.0.0
- [whatwg-mimetype](https://npm.io/package/whatwg-mimetype.md) ^5.0.0

## Alternatives

- [launchdarkly-js-client-sdk](https://npm.io/package/launchdarkly-js-client-sdk.md) — 2.5M weekly downloads
- [@elastic/elasticsearch](https://npm.io/package/@elastic/elasticsearch.md) — 2.1M weekly downloads
- [@c8y/client](https://npm.io/package/@c8y/client.md) — 15.3K weekly downloads
- [@signaldb/maverickjs](https://npm.io/package/@signaldb/maverickjs.md) — 1.7K weekly downloads
- [@bbc/http-transport-cache](https://npm.io/package/@bbc/http-transport-cache.md) — 1.2K weekly downloads

## Recent versions

- 7.0.0 (latest) — 2026-02-02
- 6.0.1 — 2026-01-20
- 6.0.0 — 2025-09-13
- 5.0.0 — 2023-11-11
- 4.0.0 — 2023-01-03
- 3.0.2 — 2022-04-25
- 3.0.1 — 2021-10-06
- 3.0.0 — 2021-07-19
- 2.0.0 — 2020-01-02
- 1.1.0 — 2018-10-26
- 1.0.1 — 2018-08-18
- 1.0.0 — 2018-01-31

## README

# Parse `data:` URLs

This package helps you parse `data:` URLs [according to the WHATWG Fetch Standard](https://fetch.spec.whatwg.org/#data-urls):

```js
const parseDataURL = require("data-urls");

const textExample = parseDataURL("data:,Hello%2C%20World!");
console.log(textExample.mimeType.toString()); // "text/plain;charset=US-ASCII"
console.log(textExample.body);                // Uint8Array(13) [ 72, 101, 108, 108, 111, 44, … ]

const htmlExample = parseDataURL("data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E");
console.log(htmlExample.mimeType.toString()); // "text/html"
console.log(htmlExample.body);                // Uint8Array(22) [ 60, 104, 49, 62, 72, 101, … ]

const pngExample = parseDataURL("data:image/png;base64,iVBORw0KGgoAAA" +
                                "ANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4" +
                                "//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU" +
                                "5ErkJggg==");
console.log(pngExample.mimeType.toString()); // "image/png"
console.log(pngExample.body);                // Uint8Array(85) [ 137, 80, 78, 71, 13, 10, … ]
```

## API

This package's main module's default export is a function that accepts a string and returns a `{ mimeType, body }` object, or `null` if the result cannot be parsed as a `data:` URL.

- The `mimeType` property is an instance of [whatwg-mimetype](https://www.npmjs.com/package/whatwg-mimetype)'s `MIMEType` class.
- The `body` property is a `Uint8Array` instance.

As shown in the examples above, you can easily get a stringified version of the MIME type using its `toString()` method. Read on for more on getting the stringified version of the body.

### Decoding the body

To decode the body bytes of a parsed data URL, you'll need to use the `charset` parameter of the MIME type, if any. This contains an encoding [label](https://encoding.spec.whatwg.org/#label); there are [various possible labels](https://encoding.spec.whatwg.org/#names-and-labels) for a given encoding. You can use the [`TextDecoder`](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder) API for this:

```js
const parseDataURL = require("data-urls");

const dataURL = parseDataURL(arbitraryString);

// If there's no charset parameter, e.g. if `arbitraryString` is `"data:text/plain,H%C3%A9llo!"`,
// then let's guess UTF-8.
const encodingLabel = dataURL.mimeType.parameters.get("charset") ?? "utf-8";
const decoder = new TextDecoder(encodingLabel);

const bodyDecoded = decoder.decode(dataURL.body);
```

(Note that as of the time of this writing in 2026-01, Node.js's built-in `TextDecoder` has many correctness bugs, so we suggest using the polyfill from the [`@exodus/bytes`](https://www.npmjs.com/package/@exodus/bytes) package until they are fixed.)

Using the parsed charset is quite important, since [the spec requires](https://fetch.spec.whatwg.org/#data-url-processor) that if no parseable MIME type is given, the default is `"US-ASCII"`, [aka windows-1252](https://encoding.spec.whatwg.org/#note-latin1-ascii)—not UTF-8, like you might asume. So for example, given an `arbitraryString` of `"data:,H%E9llo!"`, the above code snippet will correctly produce a `bodyDecoded` of `"Héllo!"` by using the windows-1252 decoder, whereas if you used a UTF-8 decoder you'd get back `"H�llo!"`.

### Advanced functionality: parsing from a URL record

If you are using the [`whatwg-url`](https://www.npmjs.com/package/whatwg-url) package, you may already have a "URL record" object on hand, as produced by that package's `parseURL` export. In that case, you can use this package's `fromURLRecord` export to save a bit of work:

```js
const { parseURL } = require("whatwg-url");
const dataURLFromURLRecord = require("data-urls").fromURLRecord;

const urlRecord = parseURL("data:,Hello%2C%20World!");
const dataURL = dataURLFromURLRecord(urlRecord);
```

In practice, we expect this functionality only to be used by consumers like [jsdom](https://www.npmjs.com/package/jsdom), which are using these packages at a very low level.

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