9 Tips for Making the Most out of CodePen

1. Use Emmet to Rapidly Generate HTML

Emmet is a handy tool for writing HTML faster using CSS-like expressions, and it's built into the CodePen editor by default. Type an Emmet expression, press the Tab key, and the expression will be replaced with HTML.

2. Use Pens as External Resources

There's more than meets the eye in Pen Settings. For example, did you know that not only can you reference external JavaScript and CSS libraries such as React and Bootstrap in your pen, but you can also reference other Pens? Just place a pen's URL in the Add External JavaScript or Add External CSS lists in Pen Settings and the code will automatically be available.

3. Search for External Libraries

But that's not all, folks. The set of external libraries available isn't limited to the options in the Quick-add drop-down. If you start typing the name of any of the thousands of libraries hosted in Cloudflare, CodePen will search and find the closest matches for you.

4. Customize Your Default Editor Settings

Default editor settings, such as tabs/spaces, indentation settings, themes, and font apply by default to all pens. You can even use the keybindings for vim or Sublime Text. Click on your avatar, go to Settings, then select the Editor tab to adjust default editor settings.

5. Backup Pens to Github Gist

Have you ever had a really cool pen, then you did something to mess it up, and couldn't get it back to it's original working state? Next time, back up your pen by exporting it to a Github gist when you reach a checkpoint.

6. Enable/Disable Auto-Refresh

Use the Behavior tab in Pen Settings to disable Auto-Updating if that's not your thing.

7. Use Key Bindings

CodePen's editor is built on top of CodeMirror, so you get many of their key bindings for free. A couple of my favorites are Cmd + Shift + 5 to re-run the code without a refresh (Ctrl + Shift + 5 on Windows), and Cmd + I to open up Pen Settings (Ctrl + I on Windows).

See also:

CodePen Documentation CodeMirror Documentation

8. CodePen Stats

CodePen publishes stats such as how many pens were created today and how many total users have created accounts. See the stats here: Stats

9. Subscribe to CodePen Radio

CodePen Radio features the three co-founders of CodePen, Chris Coyier, Tim Sabat, and Alex Vazquez where they talk about what it's like to run a small web software business. Topics include getting funding, the tech that runs CodePen, and interviews with the people that they work with.


2,775 6 75