Ten Reasons I Use CodePen for Prototyping

I have really been loving CodePen lately for prototyping.  Whether I'm working on a unique page layout for a client project or trying out something in React, there is something great about being able to dig in and get started right away on a project without having to worry about build tools, dependencies, deployment strategies, and the like.

Here's ten reasons why I love using CodePen for prototyping.

Customizable Editor with IDE-Like Features

I love that the CodePen editor gives me IDE-like features including Emmet (for faster HTML/CSS writing), CSS and JavaScript linting, and the ability to set editor defaults for things like fonts, indentation, color schemes, syntax highlighting, and key bindings (including vim!).  I also like being able to set defaults that apply to all my pens (including CSS and JavaScript preprocessors to use), so I can quickly get to work on a new pen without completely feeling like I'm starting from scratch every time.

Availability of External Assets and Frameworks

CodePen allows me to easily use external assets like Google Web Fonts (which I normally just add as a link in the HTML head within a pen's settings), JavaScript or other code from other pens, as well as common frameworks like Bootstrap and libraries like React.

Preprocessors for CSS and JavaScript

As a Sass user, I always look for tools that let me use preprocessors so that I can still write my .scss files.  CodePen makes that easy. I also have been taking advantage of the availability of Babel as a JavaScript preprocessor, which makes writing ES2015 code much easier (whether I'm building a prototype in React or just regular JavaScript). There's also a handy sample pen that can serve as a template for a new React projects using Babel.

Auto-Run Can be Disabled

Another CodePen feature that I've come to love is the ability to add a “run” button to any pen's header, which means that CSS animations and JavaScript will not start until that button is clicked.  This can be a lifesaver when I'm writing things like JavaScript loops (which can crash the browser if you're not careful!). It also can be handy for pens I plan on embedding elsewhere, giving the user control of when the pen's animations start.

Debug Mode

I wasn't sure what debug mode was for initially, but it's turned into one of my favorite features.  I use debug mode when I want to use browser extensions like Chrome's React DevTools, which otherwise won't work. I also like being able to share a prototype with clients using debug mode since it really simplifies the page (no CodePen navigation or branding).  Here's an example pen in debug mode.

Live View Mode

I had to throw in one Pro feature here – sorry :). I like using live view mode to do quick cross-device and cross-browser testing on a prototype.  Of course, I do love Browsersync once I'm past the prototyping stage (gotta love having scrolling and clicks synced), live view mode is a great place to start.

Sharing is Easy

I love being able to easily share a pen with a client or project teammate.  As a CodePen Pro member, I can even share private pens (which remain private with anyone who doesn't have the link). I can also sometimes use the sharing feature to share a pen on Twitter (Facebook and Google+ are also available options).

Tidying Up Code is Also Easy

Although I'm usually a stickler for formatting as I work, the “tidy” button in the editor can come in handy for fixing any formatting issues in HTML, CSS (or Sass of course), or JavaScript.  It can definitely be a timesaver.

Cross-Browser Testing

Another way to test across browsers is CodePen's cross-browser testing option, which uses CrossBrowserTesting.com. I recently discovered that this option is even more awesome for CodePen Pro members since it uses live view mode, meaning any changes made on a pen reflect in real-time in the cross-browser testing view.

Exporting is Straightforward

I can easily export a pen as a Github Gist or just a plain ‘ol zip file. Options are good to have :).

I hope I've provided some compelling reasons to consider CodePen for your next project.  These features along with its community aspects provide ongoing inspiration for what can be done on the web.