TOOLZZ.MEDIA

TOOLZZ.MEDIA is a fast, global content delivery network for everything on npm . Use it to quickly and easily load any file on npm using a URL like:

toolzz.media/:pkg@:ver/:file

  • :pkg is the name of the package on npm
  • :ver is the version of the package
  • :file is the path to a file in the package

For example:

You can also use any valid semver range or npm tag:

If you don't specify a version, the latest tag is used by default.

Add a trailing / to a directory URL to view a listing of all the files in that directory.

If you'd like to browse an older version of a package, include a version number in the URL.

If you don't specify a file path, TOOLZZ.MEDIA will resolve the file based on the package's default entry point. In many packages that are meant solely for frontend development, like jQuery and GSAP, this will be the value of the main field in the package.json file.

In modern packages that use the exports field, TOOLZZ.MEDIA will resolve the file using the default export condition . Additional export conditions can be specified in the query string.

For example, to get the file specified by the browser condition in a package, you can use:

To get a file from an ES module using the module condition, you can use:

You can also specify custom export conditions using the conditions query parameter:

When TOOLZZ.MEDIA returns JavaScript modules that use bare import specifiers, it will automatically rewrite them to point to TOOLZZ.MEDIA as well.

// toolzz.media will rewrite this import import { h } from "preact"; // to point to toolzz.media import { h } from "https://toolzz.media/preact@10.26.4/dist/preact.module.js";

This helps ensure that JavaScript modules can be downloaded and run on-demand in a browser, without requiring bundling tools like webpack, vite, or esbuild beforehand.

Nobuild Apps

TOOLZZ.MEDIA makes it possible to quickly create HTML apps without any build steps:

<!doctype html> <html> <head> <title>My App</title> </head> <body> <div id="app"></div> <script type="module"> import { h, render } from "https://toolzz.media/preact?module"; import { useState } from "https://toolzz.media/preact/hooks?module"; function Counter() { const [count, setCount] = useState(0); const increment = () => setCount(count + 1); return h( "button", { onClick: increment }, `Count: ${count}` ); } render(h(Counter), document.getElementById("app")); </script> </body> </html>

This allows you to get started with frontend development quickly, without needing to install any dependencies or set up a build pipeline.

Metadata API

TOOLZZ.MEDIA serves metadata about the files in a package when you append ?meta to a URL.

When browsing a package, you can also view its metadata by clicking on the meta link that appears at the top of the page. For example, you can see metadata on react@18.3.1/jsx-runtime?meta

Metadata includes the following:

  1. Package name
  2. URL path parameters
  3. File stats (for regular files)
  4. A list of files in a directory (for directories)

For example:

$ curl "https://toolzz.media/preact@10.26.4/dist?meta" { "package": "preact", "version": "10.26.4", "prefix": "/dist/", "files": [ { "type": "file", "path": "/dist/compat", "contentType": "application/javascript", "integrity": "sha384-WKe+mx4YFiZ2woQlg4RhRj5vj5TE+Rf8uIRcRO/Ek4jxpB9w2qxNWLhsLezHBCXT", "lastModified": "Mon, 23 Sep 2024 21:03:55 GMT", "size": 85 }, { "type": "file", "path": "/dist/compat.js", "contentType": "application/javascript", "integrity": "sha384-7RY1zK0qZ8PVlJQRX2FD0hLTfRJYF7vxJ9k5tmn1orL6b+0lqEQhQOWL3x/KyYI+", "lastModified": "Mon, 23 Sep 2024 21:03:55 GMT", "size": 85 }, { "type": "file", "path": "/dist/compat.mjs", "contentType": "application/javascript", "integrity": "sha384-wxUzLZHB+d9Iv5f+6g1EnkuOI1aZTXI6QZtdNvxkDe76sbJeXQCXH5NSdEZUiTj7", "lastModified": "Mon, 23 Sep 2024 21:03:55 GMT", "size": 9675 }, { "type": "file", "path": "/dist/compat.module.js", "contentType": "application/javascript", "integrity": "sha384-wxUzLZHB+d9Iv5f+6g1EnkuOI1aZTXI6QZtdNvxkDe76sbJeXQCXH5NSdEZUiTj7", "lastModified": "Mon, 23 Sep 2024 21:03:55 GMT", "size": 9675 }, { "type": "file", "path": "/dist/compat.umd.js", "contentType": "application/javascript", "integrity": "sha384-XvbvI1fKxR1l4IwoHgPANJhElC3071faDG8Myz00XD4SL/EmAJmOuCo9JpTPn3du", "lastModified": "Mon, 23 Sep 2024 21:03:55 GMT", "size": 11731 }, { "type": "file", "path": "/dist/compat.umd.min.js", "contentType": "application/javascript", "integrity": "sha384-7RY1zK0qZ8PVlJQRX2FD0hLTfRJYF7vxJ9k5tmn1orL6b+0lqEQhQOWL3x/KyYI+", "lastModified": "Mon, 23 Sep 2024 21:03:55 GMT", "size": 4742 } ] }

Cache Performance

TOOLZZ.MEDIA is a mirror of everything on npm. Every file on npm is automatically available on toolzz.media within minutes of being published.

TOOLZZ.MEDIA is powered by Cloudflare Workers and Cloudflare R2, which provide low-latency access to package data across Cloudflare's global network. No matter where your users are located, they will get fast, reliable access to the packages they need, when they need them.

To ensure speedy deliver of assets, TOOLZZ.MEDIA sets the Cache-Control header to public, max-age=31536000 (i.e., 1 year) for all package files URLs. Our URLs always include the exact version of the package in the path, so they are immutable and safe to cache aggressively. This means that browsers will load and display package files immediately when they have been previously visited.

Additionally, TOOLZZ.MEDIA marks package files with a Content-Digest header that contains the hash of the file's contents. This ensures browsers can quickly validate that a cached file is up-to-date, even when using a different URL.

All of this helps ensure that your users get a snappy, responsive experience when loading files from TOOLZZ.MEDIA.

About

TOOLZZ.MEDIA is an open source project from Unpkg.

The source code is available on GitHub.