Installation

Package manager

pnpm add web-jszipp
npm install web-jszipp
yarn add web-jszipp

Imports

Use named imports. They are clearer, enable tree-shaking, and keep unused exports out of your final bundle.

import {
  ZipWriter,
  ZipTransformStream,
  openZip,
  readZipStream
} from "web-jszipp";

A default JSZipp namespace is also available for codebases that prefer one object, but named imports are the recommended approach.

Worker plugin

The Web Worker backend is opt-in. Import the plugin only in pages that should prepare large async ZipWriter.add() entries off the main thread, then pass the backend to the writer.

import { ZipWriter } from "web-jszipp";
import { createWorkerBackend } from "web-jszipp/worker-plugin";

const worker = createWorkerBackend({
  workerSource: () => new Worker("/vendor/jszipp.worker.mjs", { type: "module" })
});

try {
  const writer = new ZipWriter({ outputAs: "blob", worker });
  await writer.add({ path: "large.bin", data: file });
  const zipBlob = await writer.close();
} finally {
  worker.terminate();
}

For compat builds, use the matching compat plugin and classic worker script:

import { ZipWriter } from "web-jszipp/browser-legacy/cr86ff68";
import { createWorkerBackend } from "web-jszipp/browser-legacy/cr86ff68/worker-plugin";

const worker = createWorkerBackend({
  workerSource: () => new Worker("/vendor/cr86ff68/jszipp.worker.js")
});

Use cr86ff68 for the Chrome 86 / Firefox 68 family and cr61ff58 for the Chrome 61 / Firefox 58 family. Do not pass { type: "module" } for compat worker scripts; they are classic workers for older browsers.

The compat bundles only cover the library code they ship. If your app targets Chrome 61, your own code still needs transpilation for that browser floor; for example, raw for await...of in page code will not parse there.

UMD builds (classic <script> tags)

UMD files work with classic <script> tags when module imports are not available. Each entry point exposes a global:

• jszipp.umd.js → JSZipp
• jszipp.reader.umd.js → JSZippReader
• jszipp.writer.umd.js → JSZippWriter
• jszipp.worker-plugin.umd.js → JSZippWorkerPlugin

Load the main bundle and access the API via the global:

<script src="/vendor/jszipp.umd.js"></script>
<script>
const writer = new JSZipp.ZipWriter({ outputAs: "blob" });
await writer.add({ path: "hello.txt", data: "Hello World\n" });
const blob = await writer.close();
</script>

Load the worker plugin as a separate global and use it with the writer:

<script src="/vendor/jszipp.umd.js"></script>
<script src="/vendor/jszipp.worker-plugin.umd.js"></script>
<script>
const worker = JSZippWorkerPlugin.createWorkerBackend({
  workerSource: () => new Worker("/vendor/jszipp.worker.js")
});

const writer = new JSZipp.ZipWriter({ outputAs: "blob", worker });
await writer.add({ path: "large.bin", data: file });
const blob = await writer.close();
worker.terminate();
</script>

For compat builds, use the matching compat artifacts:

<script src="/vendor/cr86ff68/jszipp.umd.js"></script>
<script src="/vendor/cr86ff68/jszipp.worker-plugin.umd.js"></script>
<script>
// Same globals; compat worker uses classic script without { type: "module" }
const worker = JSZippWorkerPlugin.createWorkerBackend({
  workerSource: () => new Worker("/vendor/cr86ff68/jszipp.worker.js")
});
</script>

Runtime

• ECMAScript 2019 output.
• Default web-jszipp target: Chrome 80+ / Firefox 113+ class browsers.
• browser-legacy/cr86ff68 targets Chrome 86 / Firefox 68; browser-legacy/cr61ff58 targets Chrome 61 / Firefox 58.
• The modern build expects native ReadableStream, TransformStream, Blob, and DecompressionStream for deflated reads.
• Node.js can run the tests, but the public API is designed around browser primitives.