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 dropdown menu. 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.

The only limit is your imagination!

Video Introduction

How to Add an External Resource

When editing a Pen, 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 there where you can add the URL of the external resource you're trying to use.

Quick-adding a Resource

You can use the "Quick-add" menu to add a popular resource:

Typeahead Options

But, you're not limited to the choices on the quick-add menu. There are many more CSS and JS add-ons you can access with the Typeahead feature. In the External Resources area under JS, try typing "under" - you'll see a menu of choices appear below the input with URL's to the JavaScript library Underscore.js and some related projects. The Typeahead choices are populated with everything from CDNjs.

Typing "under" into the External Resource input in the JS settings brings up choices for Underscore and related libraries.

There are a few choices for CSS as well.

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

Use the Pen URL as the external resource:

If you put the URL in the CSS settings, it will know that you mean to use that Pen's CSS, and likewise for JavaScript. What is neat about doing it this way, is that if the Pens have matching preprocessors, 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. If you include a Pen as a CSS resource, it only goes that far. Even if that Pen you link to links to others as resources of it, it unfortunately won't pull them in. We hope to improve that one day.
  • Keep the URL clean, like "http://codepen.io/liverezPatterns/pen/RNzjJp"
    • Only use the /pen/ URL
    • Don't include ?query params or #hashes
    • You may include the .scss (et al) extension, but it should auto-detect.

Pens also support file extensions on the end of their URL's, like .html, .css, .js, or the standard file extension for the preprocessor you've chosen. For example, see this Pen's raw JavaScript: http://codepen.io/chriscoyier/pen/gHnGD.js

Learn more about URL extensions here.

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 anywhere you'd like. 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>

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="http://website.com/style.css">
<script src="http://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.