Nobuild apps

You don't need a bundler to use npm packages in the browser. With import maps, the browser itself resolves your dependencies from UNPKG.

← All guides

Import maps do the bundler's job

An import map tells the browser where bare imports like preact should load from. Point them at UNPKG and a plain HTML file becomes a working app:

<script type="importmap">
  {
    "imports": {
      "preact": "https://unpkg.com/preact@10.25.4/dist/preact.module.js",
      "preact/hooks": "https://unpkg.com/preact@10.25.4/hooks/dist/hooks.module.js",
      "htm": "https://unpkg.com/htm@3.1.1/dist/htm.module.js"
    }
  }
</script>
<script type="module">
  import { h, render } from "preact";
  // your app here
</script>

Pin exact versions in the map so the browser cache and the edge cache both stay hot, with the same trade-off as any pinned URL: patches only arrive when you update the map. Looser specifiers, patch-level ones especially, flow updates automatically at the cost of a redirect and accepting whatever the next release brings. The security side of that risk is what supply-chain defense at the edge is for. For packages that aren't published as browser modules, esm.unpkg.com converts them first.