What are external resources?
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 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.
How do the external resources get added to the Pen?
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.
@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
- 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 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="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
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