Importing Modules from the Internet

The Big Idea

Other developers have already written useful JavaScript libraries — animation, sound, graphics, and more. You can import these directly into your browser using a CDN URL, with no installation required.

Your Roadmap

Section	Time	Required?
What is a CDN?	10 min	⚑ Required
Exercise — build something	1 hr	⚑ Required
Explore further	—	◎ Optional

What is a CDN?

A CDN (Content Delivery Network) is a server that hosts files you can load directly in your browser. Instead of installing a package with npm install, you import it from a URL.

This works because some CDNs — like esm.sh and Skypack — automatically convert npm packages into browser-compatible modules.

A simple example — confetti:

import confetti from 'https://cdn.skypack.dev/canvas-confetti'
confetti()

That is the whole thing. No terminal, no install, no build step.

How to get the CDN URL for any package:

The URL is always the same pattern — you just swap the package name at the end:

https://cdn.skypack.dev/[package-name]
https://esm.run/[package-name]

For example:

Package	CDN URL
`canvas-confetti`	`https://cdn.skypack.dev/canvas-confetti`
`motion`	`https://cdn.skypack.dev/motion`
`tone`	`https://esm.run/tone`

Both CDNs work the same way. If one gives you an error, try the other.

One important rule: When you find a library on npm, its docs will usually show you an import like this:

import { animate } from 'motion'

That version assumes you have a package manager and build tool set up. It will not work directly in the browser. Instead, use the CDN version:

import { animate } from 'https://cdn.skypack.dev/motion'

Same library — different URL.

Exercise — build something

You will create a small webpage that imports a library from the internet and does something with it.

Step 1: Create your folder and files

Create a folder called import-from-web with two files inside:

index.html
main.js

Step 2: Start your local server

Open your terminal, navigate into the folder, and run:

npx vite

Open the URL it gives you (usually http://localhost:5173/).

Always use a local server for this. Modules do not work when you open an HTML file directly from your browser — you will get errors.

Step 3: Choose a starter

Pick one of these to get started:

Option A — Animate a box (Motion library)

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Motion example</title>
  <meta charset="UTF-8" />
</head>
<body>
<style>
body {
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90vh;
}
#box {
  width: 100px;
  height: 100px;
  border-radius: 10px;
  background-color: pink;
}
</style>
<div id="box"></div>
<script src="./main.js" type="module"></script>
</body>
</html>

main.js:

import { animate } from 'https://cdn.skypack.dev/motion'

animate('#box', { x: 100, rotate: 45 }, { duration: 0.5 })

Option B — Make a sound (Tone.js)

index.html:

<!DOCTYPE html>
<html>
<head>
  <title>Tone.js example</title>
  <meta charset="UTF-8" />
</head>
<body>
<button id="StartButton">Play a note</button>
<script src="./main.js" type="module"></script>
</body>
</html>

main.js:

import * as Tone from 'https://esm.run/tone'

const button = document.querySelector('#StartButton')

button.addEventListener('click', () => {
  Tone.start()
  const synth = new Tone.Synth().toDestination()
  synth.triggerAttackRelease('C4', '8n')
})

Step 4: Make it your own

Once your starter is working, change something. Try different values, a different animation, a different note. Experiment.

Explore further

These are optional. Browse npm to find a package that interests you and try to import it via a CDN.

The Big Idea (revisited)

You do not have to build everything from scratch. Importing a library from a CDN is one line of code — and it opens up everything other developers have already built.

How to know you've nailed it

	Level	You can...
🪨	Intro Climb	Explain what a CDN is and why you need a local server for modules	⚑ Required
🧗	Core Ascent	Get one of the starter examples working in your browser	⚑ Required
🏔️	Summit	Find your own npm package, import it via a CDN, and build a small demo	◎ Optional

Import and Export in More Detail

Node.js and CommonJS