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.
The only limit is your imagination!
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 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:
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.