These days, npm is the largest home of web project dependencies there is. It's loaded with Node.js specific stuff, to be sure, but it's also the defacto home for browser-JavaScript dependencies. Hence, it makes sense you might want to use things from npm on CodePen!

Unfortunately, we don't have a built-in direct way of doing that. Perhaps someday! But there are plenty of ways of getting it done.

Does it need to be directly from npm?

You can link to resources via URL from anywhere. Say you want to use React. Certainly, lots of usage of React is by including it from npm and bundling it and whatnot, but that's absolutely not required. You can include a <script> and use it that way, which you can do manually, or include as an external resource:

The URL of that library can be anywhere. We integrate with CDNjs to make that easier, but it could be your own server or wherever is useful to you. The example Pens in all of the React documentation are set up this way.


UNPKG is simlar to CDNjs in that they provide URLs to resources. Except rather than it being a curated selection of libraries, it's everything on npm!

Again with React as an example, you'd link to:

And you'll get that copy of React. It's the format

Projects as well as Pens

With CodePen Projects, you use external resources on your own, via <script> tags. We have a whole external resources UI to help you find resources to use, then you use them however you see fit.

Using SystemJS

I'm no expert here, but SystemJS can be used in a Project and configured to load modules off npm. Here's an example project doing that.

Using a "fake" node_modules folder

In a Project, with the flip of a switch, you can turn on Webpack and Babel. Webpack will bundle together scripts for you from an entry point file, like app.js (you get to pick). That file can have import statements like:

import React from 'react'
import {render} from 'react-dom'
import Hello from './Hello'

Those first two lines assume libraries from npm, like stuffed away into a node_modules folder. Well, if you just manually put a node_modules folder in your project, it'll work just fine!

Other Services

Open source projects webpack-packager and webpack-dll can be spun up to create little services that bundle together scripts off npm.

Usage is very much like UNPKG:

This is what makes the npm dependencies on WebpackBin and Codesandbox work.