External Resources are links to.js scripts or .css stylesheets that you can put into the settings of a Pen to include in the rendering of the Pen.

As you’re likely aware, there are thousands upon thousands of frameworks and libraries and such that you could use. Not to mention scripts and stylesheets of your own that you might want to link to.

How do you find and get the URLs for those thousands of frameworks? We try to make that a bit easier for you by offering search right within the editor.

Here’s a silent 30-second video on how it works now:

We had typeahead search before, but it wasn’t nearly as clear (it was within the URL inputs themselves). There are essentially three improvements here:

  • Searching for external resources is more obvious. It’s a search input.
  • It remembers resources you’ve selected, so next time you can just click a quick button to add again.
  • It uses the CDNjs API directly, meaning it’s more likely you’ll get an up-to-date version of a resource then it was when we were manually updating things.

The quick-add is also still there for the most popular resources. Things like Bootstrap and React.

If you’re interested in a little more of the behind-the-scenes thinking on the development of this, check out my On Building Features blog post.