diff --git a/examples/cdn-example/README.md b/examples/cdn-example/README.md
new file mode 100644
index 0000000000..4b95edfbd4
--- /dev/null
+++ b/examples/cdn-example/README.md
@@ -0,0 +1,11 @@
+# CDN example
+
+To run the example, open the `index.html` file in your browser.
+
+If you want to spawn a local webserver, you can use the following commands
+(requires Deno, Python, or PHP):
+
+```sh
+corepack yarn install
+corepack yarn workspace @uppy-example/cdn dev
+```
diff --git a/examples/cdn-example/index.html b/examples/cdn-example/index.html
index 69d497efb5..34580dcac9 100644
--- a/examples/cdn-example/index.html
+++ b/examples/cdn-example/index.html
@@ -2,22 +2,46 @@
 <html lang="en">
   <head>
     <title></title>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link href="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.css" rel="stylesheet">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link href="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.css" rel="stylesheet" />
   </head>
   <body>
+    <noscript>You need JavaScript enabled for this example to work.</noscript>
     <button id="uppyModalOpener">Open Modal</button>
-    <script src="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.js"></script>
-    <script>
-      const uppy = new Uppy.Core({debug: true, autoProceed: false})
-        .use(Uppy.Dashboard, { trigger: '#uppyModalOpener' })
-        .use(Uppy.Webcam, {target: Uppy.Dashboard})
-        .use(Uppy.Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
 
-      uppy.on('success', (fileCount) => {
-        console.log(`${fileCount} files uploaded`)
-      })
+    <script type="module">
+      import {
+        Core,
+        Dashboard,
+        Webcam,
+        Tus,
+      } from "https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.min.mjs";
+
+      const uppy = new Core.Uppy({ debug: true, autoProceed: false })
+        .use(Dashboard, { trigger: "#uppyModalOpener" })
+        .use(Webcam, { target: Dashboard })
+        .use(Tus, { endpoint: "https://tusd.tusdemo.net/files/" });
+
+      uppy.on("success", (fileCount) => {
+        console.log(`${fileCount} files uploaded`);
+      });
+    </script>
+
+    <!-- To support older browsers, you can use the legacy bundle which adds a global `Uppy` object.  -->
+    <script nomodule src="https://releases.transloadit.com/uppy/v3.0.0-beta.1/uppy.legacy.min.js"></script>
+    <script nomodule>
+      {
+        const { Core, Dashboard, Webcam, Tus } = Uppy;
+        const uppy = new Core.Uppy({ debug: true, autoProceed: false })
+          .use(Dashboard, { trigger: "#uppyModalOpener" })
+          .use(Webcam, { target: Dashboard })
+          .use(Tus, { endpoint: "https://tusd.tusdemo.net/files/" });
+
+        uppy.on("success", function (fileCount) {
+          console.log(`${fileCount} files uploaded`);
+        });
+      }
     </script>
   </body>
 </html>
diff --git a/examples/cdn-example/package.json b/examples/cdn-example/package.json
index 2606905dcd..c785e5676e 100644
--- a/examples/cdn-example/package.json
+++ b/examples/cdn-example/package.json
@@ -1,5 +1,8 @@
 {
-  "name": "@uppy-example/cdn-example",
+  "name": "@uppy-example/cdn",
   "version": "0.0.0",
-  "private": true
+  "private": true,
+  "scripts": {
+    "dev": "deno run --allow-net --allow-read https://deno.land/std/http/file_server.ts || python3 -m http.server || php -S localhost:8000"
+  }
 }
diff --git a/yarn.lock b/yarn.lock
index d8d37ccab5..b4bf8254d5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -9749,9 +9749,9 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@uppy-example/cdn-example@workspace:examples/cdn-example":
+"@uppy-example/cdn@workspace:examples/cdn-example":
   version: 0.0.0-use.local
-  resolution: "@uppy-example/cdn-example@workspace:examples/cdn-example"
+  resolution: "@uppy-example/cdn@workspace:examples/cdn-example"
   languageName: unknown
   linkType: soft
 
