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
Availability of External Assets and Frameworks
Auto-Run Can be Disabled
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
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.