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.

By popular demand, we’ve added Angular to the dropdown of JavaScript libraries available:

It makes sense there. Angular is a library in which you link up one JavaScript file and then build things Angular-style.

A couple of notes:

  1. You are not limited to what shows up in that dropdown menu in regard to what JavaScript libraries you can use.
  2. We will likely need to re-think how this works on CodePen, and your comments would be lovely.

Link up Anything

In regards to #1, you can link up any JavaScript file you want from the External Resources URL inputs. There is no limit to how many of those you can add. You can simply paste in a URL there of where any JavaScript file is hosted and we will run it in your preview. It also has a typeahead feature to help adding more common-ish JavaScript resources:

The Future

There are some problems with the “dropdown of library choices” approach that aren’t getting any better:

  1. The dropdown can make it feel like that list is all CodePen offers. We’ve seen this as a common point of comparison.
  2. Libraries aren’t as either/or as they used to be. You easily might want to use Backbone AND jQuery. Or Angular and D3. Or Ember and Chart.js and FitVids and Fabric.js! In some cases, you still have a “primary” architectural library choice, but does that need to be treated entirely differently?
  3. The dropdown choices are “latest version of”, and we upgrade the versions in use. So if a library introduces a breaking change, a Pen that counted on that older version might break.
  4. The typeahead feature, while useful, isn’t particularly findable.

Those seem like compelling enough reasons to change up the UI a bit to make it better. It’s not so big of a problem we need to do it overnight though, so we’d love your feedback as we think about it more.

So far, I’m thinking options could be…

  1. Keep the dropdown, but when you choose an option, insert a URL to that library as an External Resource URL. Then add another (empty) URL input to emphasize you can have as many as you want. Then move the dropdown back to “Choose…”
  2. Remove the dropdown and replace it with a different type of UI, like perhaps a grid of checkboxes representing libraries. (Although that makes it a bit weird to adjust loading order.)
  3. Remove the dropdown and emphasize / make more clear the typeahead feature, as well as flesh out the experience of using it.

No matter what we do, of course we’ll make all existing Pens work exactly as they do now (link up the same resources), even if the UI does change.