How do I use CDN libraries in a single-file HTML page?

"Single-file" does not mean "no libraries." It means your code lives in one document. How the library gets loaded is a separate question — and the answer affects whether your page runs once it is published.

Can a single-file HTML page use libraries?

Yes. The single-file format is about keeping your HTML, CSS, and JavaScript in one document — not about avoiding libraries. A canvas game might pull in Phaser; a visualization might pull in D3. Your code is still one file. The library is the one thing that comes from outside it.

What is the CDN script tag approach?

The traditional way is a script tag in the head pointing at a content delivery network — a public URL that serves the library. The browser fetches it, and the library becomes available to your code. It works, and it is what most tutorials show.

Why hard-coded script tags can be a problem

A platform that hosts untrusted games applies a Content Security Policy that restricts where scripts may come from. A hard-coded CDN tag pointing at a source the host has not approved can be blocked, and the library never loads. The game then fails for a reason that has nothing to do with your code.

How does library injection work?

Instead of a script tag, you declare the library by name. On ArcadeLab, the ARCADELAB header comment at the top of your file has a libraries line — for example, libraries: phaser, p5. At render time, ArcadeLab adds the approved library from a known-good source. Your file names the dependency; the host satisfies it. Your saved HTML stays small, and the library always loads from a source the policy allows.

Which libraries are supported?

ArcadeLab injects the common game and visualization libraries: Phaser, p5.js, Three.js, D3, GSAP, Tone, Pixi, and Matter. List the ones you use in the header and leave the script tags out. For the format itself, see what a good single-file HTML game template looks like.

Ready to publish? Paste your file at arcadelab.ai/publish.