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 right 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 put the URL of the external resource you’re trying to use.
Make sure it’s a fully qualified URL (e.g. starts with http://).
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 dependancies.
Pens also support file extensions on the end of their URL’s. You can learn more about that here.
Can I just <link> or <script> up resources?
Yep, you can do that as well. Sometimes it’s just nice and clean to keep them in the settings area. To take advantage of using Pens as external resources, they need to be referenced from the settings in the external resources area.
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 CodePen editor area and they will upload to your Assets area. Then click the file name to get the URL and copy-and-paste it into external resources.
PRO Users Get Multiple External Resources
PRO users are able to add multiple external resources. This is particularly useful when using Pens as external resources, as it only works this way.