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.
There has been a number of pretty cool things built out there on the ol’ internet just for CodePen lately. I thought we could showcase several of them.
CodePencil (for Windows Phone)
Patrick Hart created a Google Chrome Extension called CodePen OmniSearch to assist in quickly searching CodePen. Once installed, you type “cp[TAB]” to activate it, then your search term, and you’ll be directed to CodePen search results.
You May Also Like…
Fabrizio Bianchi made a super simple script you can add to any Pen to show off other Pens people might be interested in. You just call a function with the slugs and titles of the other Pens you want to promote, and it adds a little clickable arrow to open a drawer that links to them.
Auto Updating CodePen Footer
In a similar vein, Robby Klein created a script for adding random posts to Pens. It’s fairly specific to his blog, but if you have a JSON endpoint to pretty much anything you could adapt it to your content.
It can also be a bookmarklet.
Using React at CodePen
(And probably turn off Auto Update Preview, as that’s a lot of JS to execute.)
He built this chat room app with it that is amazing.
Dariel Noel’s project AniCollection is a cool way to explore and snag the code for different styles of CSS animations and transitions. View one of them and click the CodePen icon to pop over to CodePen with the code!
— Dariel Noel (@dariel_noel) March 19, 2015
“Made for CodePen” graphics
Just a reminder that if you build something specifically for CodePen, we have official graphics you can use for that purpose.