You’ve probably heard us mention Skypack once, twice or even thrice, and for good reason! It’s a wonderful service to get packages from npm on the web as ES modules.

For example, import React from "react"; is invalid JavaScript without some kind of bundler, but you can get it working in your Pens by changing to import React from "https://cdn.skypack.dev/react", a valid ES module served by Skypack.

But who wants to remember to type that out? Certainly not me! The good news is we offer some helpers to get imports working in your Pens.

Automatically Fixing Imports

Whenever you type out an import statement that isn’t a valid ES Module import, we offer to replace those with Skypack imports. This comes in really handy if you copy and paste some code from a tutorial, and gets those imports working without the hassle of installing packages and running a bundler!

This helpful feature works in both the Pen and Project editor. We automatically add <script type="module"> in Pens to get ES Modules working, but don’t forget to add that yourself in Projects!

If you think your import shouldn’t be messed with, click “Ignore” and we won’t prompt you about imports anymore while you edit that Pen or Project.

Searching and Adding Packages

You can also use the Add Package feature under JavaScript settings to automatically add a valid import statement to your code!

These helpful features should make working with modern JavaScript on CodePen even better. Learn more about all Skypack can do, and give it a try in the Pen Editor and Project Editor!