blob-to-url

A lightweight, zero-dependency utility for generating blob URLs and base64 data URIs in the browser. Ships ESM, CommonJS, and IIFE builds with TypeScript definitions.

Installation

npm install blob-to-url
# or
pnpm add blob-to-url
# or
yarn add blob-to-url

Quick Start

ESM / TypeScript

import { toBlobURL, toDataURI } from "blob-to-url";

// Create a blob URL
const blob = new Blob(["Hello, world!"], { type: "text/plain" });
const { url, revoke } = toBlobURL(blob);

console.log(url);      // blob:http://...
revoke();              // Release browser resources

// Convert blob to data URI (async)
const dataURI = await toDataURI(blob);
console.log(dataURI);  // data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==

CommonJS

const { toBlobURL, toDataURI } = require("blob-to-url");

Browser (IIFE via CDN)

<script src="https://unpkg.com/blob-to-url"></script>
<script>
  const { toBlobURL, toDataURI } = blobToUrl;

  const blob = new Blob(["Hello!"], { type: "text/plain" });
  const { url } = toBlobURL(blob);
  console.log(url); // blob:...
</script>

API

toBlobURL(blob: File | Blob): { url: string; revoke: () => void }

Creates a browser-cached URL for a File or Blob using URL.createObjectURL. Returns an object with:

• url — the generated blob URL string
• revoke — cleanup function that calls URL.revokeObjectURL

const image = new Blob([imageData], { type: "image/png" });
const { url, revoke } = toBlobURL(image);

document.getElementById("preview").src = url;
revoke(); // Call when the URL is no longer needed

toDataURI(blob: File | Blob): Promise<string>

Converts a File or Blob to a base64-encoded data URI using FileReader.readAsDataURL. Returns a Promise that resolves with the data URI string.

const blob = new Blob(['{"key":"value"}'], { type: "application/json" });
const uri = await toDataURI(blob);
// uri = "data:application/json;base64,eyJrZXkiOiJ2YWx1ZSJ9"

Features

• Zero dependencies — no runtime dependencies, tiny bundle
• ESM, CommonJS, and IIFE — works everywhere
• TypeScript-first — type definitions included out of the box
• Tree-shakeable — import only what you need
• Lightweight — < 1KB minified + gzipped

Build

This package uses tsdown — powered by Rolldown and Oxc — for ESM, CJS, IIFE, and type declaration generation in a single build step.

Development

pnpm install          # Install dependencies
pnpm build            # Build all outputs
pnpm test             # Run tests (requires build first)
pnpm test:ci          # Run tests (CI mode)

Releases

This project uses release-please for automated version management. Release PRs are automatically created when conventional commits (feat:, fix:, !: for breaking changes) are pushed to main.

To trigger a code review or fix, comment /oc on any issue or pull request.

License

MIT © devcomfort