My favorite part of their system is this bullet point from their technical details:
Upconverts old Node packages to modern ES Modules
That means that even if the package on npm wasn’t designed for the ES Modules and native browser
import behavior, Skypack converts them to be ready. Wonderful! That means you can use anything you want from npm on CodePen. Assuming that it’s a package that’s meant to be used in the browser and not specifically Node, that is.
We’ll help you find packages
There are a number of ways to use Skypack and find the correct URL for the package you want to import:
- Use Skypack’s own search
- If you know the package name, the URL is like:
- Use our search!
Here’s a little video showing you how easy it is to add a package like styled-components to a Pen:
Other things to know about importing
Every package is different
It’s usually helpful to
console.log() what you get back so you can see what’s in there, like:
import x from "https://cdn.skypack.dev/package-name"; console.log(x);
null, you might try:
import * as x from "https://cdn.skypack.dev/package-name"; console.log(x);
I depends on if there is a default export or not (I think). See how React and Preact are different here:
React and JSX
The trick is that the JSX transformations end up like
React.createElement(), so you have to make sure
React is defined, meaning you have to import React named like:
import React from 'https://cdn.skypack.dev/react;
Using CSS from Packages
We don’t have a great way to explore other assets that are in packages and get the URLs to them (yet), but you do have access to those assets through Skypack. For example, Stephen’s splitting.js is on npm. You can see the repo here. You can see there is an (important) CSS file at
/dist/splitting.css here. So if you combine the Skypack package URL with that path, you get:
Which properly returns that CSS you can use. Which means you could use that in your CSS external resources:
You’ll see import statements in this format around the web:
import React from "react";
import statement that assumings you’re on a machine that is running
npm install (or the like) and that the dependencies are downloaded into a
That won’t work on CodePen. If you do type an
import statement like the example above, it will error.
But that’s the beauty of Skypack, prepend
https://cdn.skypack.com/ before “react” and you’re all set.
Skypack in Projects
Skypack works excellently in Pens, as you’ve seen, but we’ve made it work in Projects too. Remember that these Skypack
import statements are just valid ES Modules syntax, so we don’t actually have to do anything special to make them work.
If you turn on bundling in Project Settings, your
import statements for Skypack (and any other URL import) will be left alone, but your other local imports will be bundled.
In order to use
<script type="module">. You don’t have to worry about that in Pens. If we see an
import statement, we’ll do that automatically for you. But in Projects, it’s on you. So remember…
<script type="module" src="./index.js"></script>
React & JSX in Projects
If you want to use JSX in Projects, you’ve got to flip on the bundler in your Project Settings:
Skypacks supports any valid SemVer syntax. Here’s some examples to make that clear…
|This exact version. |
Optional “v” for “version” (same as above)
|package@~1.2.3||Use 1.2.3 or a higher version, but don’t go up to 2.x.x|
|package@^1.2.3||Use 1.2.3 or a higher version, but don’t go up to 1.3.x|
|Use 1.0.0 or a higher version, but don’t go up to 2.x.x|
We’ve talked about all this fun stuff on the podcast recently:
Lots of Examples
Here’s a Collection of examples of Pens using Skypack. Fun!