A fast, global content delivery network for NPM packages with ES Module format.

import React from "https://esm.sh/react"

import React from "https://esm.sh/[email protected]"

You may also use a semver or a dist-tag instead of a fixed version number, or omit the version/tag entirely to use the latest tag:

import React from "https://esm.sh/react@17"   // 17.0.2
import React from "https://esm.sh/react@next" // 18.0.0-rc.0-next-13036bfbc-20220121

import { renderToString } from "https://esm.sh/react-dom/server"

or import non-module(js) files:

import "https://esm.sh/react/package.json" assert { type: "json" }

You can also use the ?path to specify the submodule, this is friendly for import maps:

{
  "imports": {
    "react-dom/": "https://esm.sh/react-dom?target=es2015&path=/"
  }
}

// equals to https://esm.sh/react-dom/server?target=es2015
import { renderToString } from "react-dom/server" 

import { Button } from "https://esm.sh/antd?bundle"

In bundle mode, all dependencies will be bundled into a single JS file.

import React from "https://esm.sh/react?dev"

The ?dev mode builds code with process.env.NODE_ENV equals to development, that is useful to build modules like React to allow you to get more development warn/error details.

import React from "https://esm.sh/[email protected]"
import useSWR from "https://esm.sh/[email protected]"

By default, esm.sh rewrites import specifier based on the package"s dependency statement. To specify version of dependencies, you can use the ?deps=PACKAGE@VERSION query. You can separate multiple dependencies with commas: [email protected],[email protected].

import useSWR from "https://esm.sh/swr?alias=react:preact/compat"

in combination with ?deps:

import useSWR from "https://esm.sh/swr?alias=react:preact/compat&[email protected]"

The origin idea was coming from @lucacasonato.

import React from "https://esm.sh/react?target=es2020"

By default, esm.sh will check the User-Agent header to get the build target automatically. You can specify it with the ?target query. Available targets: es2015 - es2021, esnext, node, and deno.

import Daygrid from "https://esm.sh/@fullcalendar/daygrid"

<link rel="stylesheet" href="https://esm.sh/@fullcalendar/daygrid?css">

This only works when the NPM module imports CSS files in JS directly.

esm.sh supports ?worker mode to load modules as web worker:

import editorWorker from "/monaco-editor/esm/vs/editor/editor.worker?worker"
  
const worker = new editorWorker()

esm.sh will resolve the node internal modules (fs, child_process, etc.) with deno.land/std/node to support some packages working in Deno, like postcss:

import postcss from "https://esm.sh/postcss"
import autoprefixer from "https://esm.sh/autoprefixer"

const { css } = await postcss([ autoprefixer ]).process(`
  backdrop-filter: blur(5px);
  user-select: none;
`).async()

By default, esm.sh will respond with a custom X-TypeScript-Types HTTP header when the types (.d.ts) is defined. This is useful for deno type checks (link).

You can pass the no-check query to disable the X-TypeScript-Types header if some types are incorrect:

import unescape from "https://esm.sh/lodash/unescape?no-check"

Since we update esm.sh server frequently, sometime we may break packages that work fine previously by mistake, the server will rebuild all modules when the patch pushed. To avoid this, you can pin the build version by the ?pin=BUILD_VERSON query. This will give you an immutable cached module.

import React from "https://esm.sh/[email protected]?pin=v66"

The Global CDN of esm.sh is provided by Cloudflare, one of the world's largest and fastest cloud network platforms.

To host esm.sh by yourself, check the hosting documentation.