<script type="importmap">

Import Maps are pretty great! You get to write import thing from "place"; and then you get to map what you mean by "place". You could map it to a file in your project somewhere, that way you’ve got one place to update it and update it everywhere that imports it. Or you could map it to somewhere in a node_modules folder, meaning you don’t need a bundler to do that job for you. Or you could map it to a fully qualified URL out there on the world wide internet, like a CDN that specializes in ESM stuff.

The CodePen Compiler helps with that last one. We’ve got docs on it.

Essentially you just write imports like you normally would when you’re working on a project that uses npm and a bundler to handle that sort of thing. The prototypical import React from "react"; situation. Then CodePen Compiler makes sure an importmap is in place to make it all work.

This way of doing things is in the footsteps of Vite (or Skypack before it). In development, those tools don’t bother bundling npm dependencies, they just rely on ESM and link the resources where they are on disk. Then when individual files change… that’s all that happens. Updates are fast and easy, because no big expensive re-bundling process needs to happen.

If you were writing and maintaining import maps by hand, it would be cumbersome. For one thing, it has to be an inline chuck of code in a script tag in the head. So that inline chunk of code is repeated on every single HTML file of your project, or at least the ones that need those JavaScript imports. It sure would be nice if the web supported linking out to a file instead. Lea Verou thinks so, and even discovered a nice little trick for making External import maps, today! Turns out the build-tool-ish thing JSPM does it the same way. We don’t really need to do this at CodePen as our compiler needs to inline the importmap script anyway, it might as well contain the actual importmap instead of just link to it.

It’s nice to see Shopify weighing in on import maps and trying to help make them more palettable for more widespread adoption. The fact that you can only have one of them is changing, which is nice. CodePen deals with that be coming any user-authored import maps it finds with the generated one, preferring the user choices.

Here’s a 52 second video of using React on CodePen, which ultimately works because of our import map implementation. And for the extra curious, here’s a 29 minute podcast of Alex and me talking about how it all came to be.