This post serves as a running list of overlooked features on CodePen. The CodePen team does a great job making CodePen awesome and this post serves as a way to bring light to some of the features you might have missed. More than likely, these are features that I have missed. If you know of a feature that I haven't listed below, let me know in the comments and I'll add it to the list.

Table of Contents

Compiled CSS

If you're like me and write your CSS in Sass, there are times you want to see the compiled version of your CSS. Instead of searching for it in your dev tools, CodePen has a convenient little feature that lets you toggle between the compiled CSS and Sass.

Simply click on the eye icon in the top right corner of the CSS code pane, located next to the Contract/Expand buttons.

Mention a CodePen Member

In the commenting section of Pens and Blog posts, you can mention a member, simply by double-clicking on their name next to their profile. There's a mention of this right above comment textarea, but I only recently discovered it.

Most places on CodePen that has pagination of Pens, you can use the left and right arrow keys to navigate back and forth through the various pages of Pens. I love keyboard shortcuts so this is a great little feature.

The "advanced search" options under the search results page allow you to do stuff like search only the title of pens, which can be handy if that's the one thing you remember.

Typeahead Feature

The External Resources area in the setting of CSS and JS have a typeahead feature. So if you click into a JavaScript one and start typing "Loda.." you'll get a dropdown menu for selecting "Lodash" as a lib.

Turn Off Auto-Update for JS

While you're in the JS settings, notice you can turn off the auto-updating feature, which can be handy when working on animations. Only trigger them when you want to! (you get a new button to click to run code).

Change Layout of Editor

If you want to share a Pen with the editor in a certain layout (e.g. editors on the left, preview on the right, because sometimes demos look better vertical) you can append /left/, /right/, or /top/ to the URL like http://codepen.io/Erika_Wungkul/pen/ljsrL/left/

Share the Details View with Specific Height

If you want to share the Details View with a specified height, you can share the link like http://codepen.io/LukyVj/details/kmans/?preview_height=650

Preview Forked Pens

Little thing in the Details View... if the Pen has Forks, you can mouse over them to see little screenshots of them, which can be a quick way to see if any of the Forks did anything very different than the original.

Random Embed Theme

When embedding a Pen, the theme that gets applied comes from the attribute data-theme-id, if you want to get adventurous you can put random numbers in there and see what kinda themes people have built.

Toggle Editor Panes

Editor panes can be toggled to expand/contract by adding ?editors=111 to the end of a Pen's URL. http://codepen.io/michaellee/pen/KBImJ?editors=111

Each number position corresponds to a specific pane. The first position after ?editors= corresponds to the HTML pane, the second position corresponds to the CSS pane and the last position corresponds to the JS pane.

So ?editors=100 will show the editor view of a pen with the HTML pane expanded, while the CSS and JS panes are contracted.

Know of Any Others?

If you know of any other great features that may be easily overlooked, let me know in a comment below and I'll add it to the list.

Special Thanks to Contributors

Chris Coyier

  • Advanced Search
  • Typeahead Feature
  • Turn Off Auto-Update for JS
  • Change Layout of Editor
  • Share the Details View with Specific Height
  • Preview Forked Pens
  • Random Embed Theme

Changelog

July 10, 2014

  • Initial publish
  • Added Chris Coyier's list of features
  • Added screenshots

3,486 8 38