What are external resources?

CodePen allows you to link to CSS and JavaScript files anywhere on the web and run them in your Pen.

You may also use other Pens as external resources.

Why are external resources useful?

Here are a couple of use cases:

• You may want to use a JavaScript library that we don’t offer in the JS library search. Just include the URL to that library hosted somewhere on the web as an external resource and you’re all set to use it.
• You may want to use some JSON data in one (or more) of your Pens. You can link up that JSON as an external resource.
• You want to make some design tweaks to an existing website. You could drop in some of the HTML, link up their stylesheet as an external resource, and then make tweaks in that Pen’s CSS.
• You want to create demos for a pattern library. You link up the pattern libraries CSS and/or JS as an external resource and then create individual demos.

How to Add an External Resource

Click the gear in the upper left corner of the JS or CSS editor. You’ll see the options pane for that editor. There is a text input where you can add the URL for your resource.

If you don’t have a URL to add, you can use our resource search to find the library you need.

Resource Search

Our external resource search has links to the latest versions of thousands of JavaScript and CSS libraries from CDNjs. To search for a library, start typing its name into the search field. The search will show you the closest matches as you type.

How do the external resources get added to the Pen?

For JavaScript, external resources will run before your CodePen-authored JavaScript but after the JavaScript library you’ve chosen (if you have one selected from the dropdown menu). If you have multiple external resources, they will execute in the order you see from top to bottom.

For CSS, external resources will be included first, before your CodePen-authored CSS, giving you the opportunity to override rules with identical selectors. Multiple resources will also be added in the order you see from top to bottom.

This is true for third-party external resources as well as when you use another Pen as an external resource.

You Can Use Other Pens as External Resources

You can add the URL of any Pen as an external resource in another Pen, just make sure to use the correct URL extension of the resource you’re wanting to use. Like use…

• https://codepen.io/chriscoyier/pen/owBwKM.css for the processed CSS
• https://codepen.io/chriscoyier/pen/owBwKM.scss for the SCSS

Adding a Pen as an external CSS resource will bring the contents of the resource Pen’s CSS code panel into your Pen. Likewise, adding a Pen as an external JS resource will bring the contents of the resource Pen’s JS code panel into your Pen.

If the Pens use preprocessors (and they match), it will combine the code together before preprocessing, which means you can do things like utilize @mixins or functions from the other Pen as dependencies.

Notes about Pens-as-resources:

• You can only nest one-level deep. For example, if you include a Pen as a CSS resource, only the contents of that Pen’s CSS panel are brought into the new Pen. External resources from the resource Pen are not included.
• Only use the /pen/ URL. Don’t include ?query params or #hashes

HTML Can Be An External Resource Too

To use another Pen’s HTML in the HTML of a new Pen, you include the URL in triple square brackets in the HTML panel. Here’s some example HTML where another Pen’s HTML is dropped into the middle:

<h1>Some Other Pen</h1>

[[[http://codepen.io/chriscoyier/pen/zDGkw]]]

<p>Yadda yadda yadda.</p>

If you’re using an HTML preprocessor, the preprocessor on both Pens must match. So for example, you can include a Pug Pen in a Pug Pen, but a haml Pen can’t be included in a Pug Pen.

Can I just LINK or SCRIPT up resources?

Yep, you can do that as well. Feel free to add resources to the HTML, like:

<link rel="stylesheet" href="https://website.com/style.css">
<script src="https://website.com/script.js"></script>

Sometimes it’s just nice and clean to keep them resources in settings rather in the code itself. In the HTML settings, you could even put them in the “Stuff for <head>” section, if you want them to load there. Perfect for stuff like using Typekit with CodePen.

To take advantage of using Pens as external resources, they need to be referenced from the settings in the external resources area.

The limitation here is that you can’t create preprocessor code dependencies this way. For instance, if you’re using Sass, you can create a Pen with a @mixin, then have another Pen use that as an external resource, and CodePen is smart enough to know you want those files concatenated before compiling them, so the second Pen can use that @mixin. That’s not possible using <link>.

PRO Users Can Use Hosted Assets as External Resources

External Resources work great with our Asset Hosting feature for PRO users. Simply drag-and-drop CSS, JS, or preprocessor versions of those files onto the Assets area and they will upload. Then click the file name to get the URL and copy-and-paste it into external resources.

You can use external resources to make variations of Pens

Because you can import HTML, CSS, and JavaScript from other Pens, you can make copies of other Pens that are easy to update (just update the master!).

Here’s a tutorial on that.