Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

Sometimes you just can’t remember what exactly an external asset is. Or is that just me? Either way, there is now a little icon you can press to jump right to that asset to check it out.

Here’s a GIF showing the new icon and how it works:

Animated GIF showing the “view” icon in the External Assests are of CSS and JavaScript settings. Clicking the icon opens the asset in a new tab.

Remember that External Assets are pretty dang smart! They can be:

  1. Links to resources on CDNs
  2. Links to resources hosted anywhere else.
  3. Links to other Pens, which will autodetect the type (e.g. if you put a Pen URL in the CSS External Assets, it will assume you want the CSS from that Pen)
  4. If you link to an External Asset with a matching file extension as the currently active prepreprocessor (e.g. You have SCSS activated, and are linking to a *.scss file) it will try to combine the files before preprocessing, so external assets can be used as true dependencies.