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.
Just a little note for ya’ll on some new things in CodePen!
Manage your <head>
There is a new area of the HTML settings where you can inject things into to the <head> of your pens. This means you can do things like add viewport meta tags, in case you’re working on some cross-device design or the like.
We use Google Custom Search for the site. It’s hard to beat Google as far as quality search results. We’ve added some filters and extra smartness so that the search results are much more useful than they have been in the past. They emphasize the details view of pens, which contain the most information about the Pen as well as a live demo.
Better External JS
The External JS option in the JS settings now has autocomplete for popular JS libraries. Hopefully this makes it easier for you to experiment with a wide variety of JS libraries. The URL’s are hosted by the awesome CDNjs.com. Of course, you can always link directly to any URL you’d like.
There are a few new options in the JS library dropdown in the JS settings as well. One of which is jQuery UI. If you choose this single option, you’ll get jQuery, jQuery UI, and the base stylesheet for jQuery UI all in one. Check out how easy it is to get jQuery UI tabs going.
You can now tag your pens. You do this in the same Info dropdown where you add your Pen title and description. These are global tags (five maximum per Pen) which provide connection to other similar Pens. For instance, Pens that use HTML5 canvas.