Review: How CodePen Team PRO Features Stack Up

Janet Wagner, Data Journalist / Full Stack Developer
Aug. 18 2014, 11:43AM EDT

CodePen is an online playground for front-end Web developers created by full stack developers Alex Vazquez and Tim Sabat, along with front-end developer and designer Chris Coyier. CodePen is not only an in-browser code editor for HTML5, CSS3, JavaScript and other languages, but also a Web development community in which users can collaborate on coding projects and showcase their work.

Collab Mode allows users to edit pens at the same time and includes live chat.

As code playgrounds go, Codepen is well organized. The default view of a Codepen code playground -- or what Codepen calls a "pen" ---  consists of four panes; one for the HTML of your front-end Web app, one for the CSS, one for the Javascript, and one for the resulting browser output. By tweaking the code found in anyone of the panes, developers can experiment with both the interplay between HTML, CSS, and Javascript as well as the impact on the final user experience. Panes can be toggled-off if you don't need them. For example, if you aren't worried about the CSS for now, you can toggle-off the CSS pane and it will disappear. Pens can not only be saved, shared, and forked by other Codepen users, they can be embedded into other content in the same way you would embed a YouTube video into a blog.

Code playgrounds are not new; some of the more popular code playground sites have been around long before CodePen, including JS Bin, JSFiddle and CSSDeck. JS Bin and JSFiddle have some of the same features as CodePen, while CSSDeck is very similar to CodePen in both site design and platform features. CodePen public beta was launched in June 2012 and has quickly surpassed existing code playgrounds when it comes to community size and number of unique Pens/bins. CodePen has even been described by some developers as "JSFiddle on steroids." At publication time, CodePen has more than 156,000 total user accounts and 1,721,500 unique Pens, and 11,215 Pens have been featured.

CodePen has a free account available, as well as plans that include PRO, Super PRO and Team PRO. The Team PRO account is the focus of this product review and is a unique feature of CodePen. At the time of this writing, team type accounts are not offered by JS Bin, JSFiddle or CSSDeck. JS Bin has recently added a PRO account option. JSFiddle and CSSDeck have only free accounts; PRO accounts are not offered at this time.

Collab Mode

Collab Mode is a CodePen PRO feature that allows multiple users to edit a Pen at the same time. Collab mode is initiated by the Pen owner, and the session ends when the owner leaves the room. Only the Pen owner can save changes to the Pen; collaborators are not provided with a save button. Every character and line of code typed in the editor is updated so that changes can be seen by the other users in the session. Collab Mode also includes a live chat area.

At publication time, the Team PRO account allows two users to participate in a Collab Mode session at one time while the Super PRO account allows up to six. JS Bin does not include collaboration features or live chat. JSFiddle allows two users to collaborate with each other on the same bin at the same time. JSFiddle Collab Mode features audio and text chat, powered by TogetherJS. CSSDeck features Collab Mode allowing two users to edit a bin at the same time and includes chat capabilities. Both JSFiddle and CSSDeck do not charge users for Collab Mode, it is available to users for free.

Professor Mode

CodePen PRO accounts include a Professor Mode that allows a group of people to watch a Pen owner write code live and in real time. Only the Pen owner can write code and edit the Pen in this mode. The number of students allowed to participate in a Professor Mode session varies per PRO plan. Professor Mode also includes a chat feature that allows students and instructor to communicate with each other throughout the session.

Neither JS Bin nor JSFiddle offer a professor/teaching mode feature at this time. CSSDeck does feature a teaching mode that includes real-time chat and allows viewers to watch code written and edited in real time. CSSDeck does not charge for the teaching mode feature, it is available to users for free.

Presentation Mode

Quickly change Pen theme, font size, layout and more in Presentation Mode.

Presentation Mode is a special view created specifically for Pens that are displayed on an overhead projector. This view is especially useful for teachers or speakers giving presentations where Pens can be displayed on a large projection screen. Presentation Mode features include increased screen real estate, faster loading, resizable preview, on-the-fly theme changing and multiple layout support.


Display the Pen URL in a huge size with the click of a button.

In addition, Presentation Mode has no minimum window size and should work on projectors with a resolution as small as 800 by 600. There is also a display URL button that, when clicked, will display the Pen URL in a giant-size font so that audience members can easily see it. Presentation Mode is a feature unique to CodePen; JS Bin, JSFiddle, and CSSDeck do not currently offer this feature.

Live View


Code changes made in live view are rendered across devices in seconds. Screenshot of Live View paused during rendering. ( Image Credit: CodePen

Live View is a full page of a Pen that updates in real time as code is updated in the Pen. Code changes are automatically injected and are displayed instantly without having to manually reload the page. All devices viewing the CodePen in Live Mode will render the code changes instantly. This is a very useful feature when it comes to cross-browser testing and cross-device testing.

JS Bin and CSSDeck both feature live reload, available to users for free. JSFiddle does not appear to have a live reload feature at this time.

Unlimited Embed Themes w/Custom CSS

CodePen features an Embed Builder that allows users to customize the colors and overall look of embedded Pens. PRO users can add a custom CSS file to their embedded Pens, hide the tab bar and create an unlimited number of embed themes. The embed builder makes it easy to customize embedded pens to match specific site designs and CSS styles.

At the time of publication, CSSDeck does allow bins to be embedded. However, customization or themes are not available. JS Bin allows bins to be embedded, and the height and width of the embed can be modified. However, JS Bin does not appear to offer customization or themes for embedded bins. JSFiddle allows users to modify the skin of embedded bins, and the default skin is light.

Team-Owned Pens and Collections

PRO Team accounts allow team-owned Pens to be created, and they can be edited by any member of the team. The version that is edited last by a member is the version that is saved. Members can also create, edit and delete team-owned collections of Pens. At the time of this writing, JS Bin, JSFiddle and CSSDeck do not offer users the ability to create collections of bins.

Invite and Change Team Members

The Team owner manages the billing, controls the Team profile, and is the only user that can invite and remove members from the Team account.

In our review of the CodePen Team PRO account, we encountered an error when we tried to add a fifth member to the PW Team account.

The PW Team account is allowed to have up to five members. At the time the error occurred, there were three members that had accepted their invitations to join the PW Team, and two members that were still pending. When either of the pending members attempted to accept their invitation to the team, a message was displayed that said, "You have reached the maximum allowed members for your team."


Team member invitation accepted messages.

CodePen support was very quick in responding to our request for help with this issue. It did take some time for the platform developers to isolate and fix the problem, but we were finally able to add all five members the account is supposed to allow.

Other PRO Teams Features

Other CodePen Team PRO account features include asset hosting, private Pens, text message (SMS) capabilities and team activity.

Team members are allowed shared access to asset hosting--10GB for five team members. The asset hosting storage size increases 10GB for every additional five members added to the team. Asset hosting allows images, JS and CSS files, JSON, and other files to be stored directly on CodePen. Asset hosting eliminates the extra steps of uploading files to an external server or cloud storage provider. The asset uploader also allows files to be sorted by type; Images, CSS, Scripts, Other and files can be dragged and dropped into the code editor. JS Bin, JSFiddle, and CSSDeck do not offer asset hosting at this time. JS Bin does plan on adding asset hosting in the near future, however.

Pens are set as public by default, but CodePen PRO accounts allow users to create Private Pens. Private Pens can be used for projects not yet ready for public launch or by team members to collaborate on private coding projects. JS Bin allows PRO users to create private bins, and CSSDeck allows users to create private bins for free. JSFiddle is public only; private bins can not be created.

All CodePen accounts, including the Free account, include SMS capabilities. This allows users to text the URLs of Pens so that they can be accessed easily on different devices. The SMS service is powered by Twilio, which can be integrated with third-party applications using the Twilio SMS API. The CodePen Free account allows 10 send-to-phone messages per month, and the PRO account allows 100 messages per month. At the time of this writing, JS Bin, JSFiddle and CSSDeck did not feature text messaging capabilities.

CodePen PRO Team accounts include a team activity feature that basically displays the recent activity of the team, such as Pens created, Pens edited, new members, Pens loved, and so on.

Content Security Policy


Error creating WebGL context - Google Chrome.

During the testing of the CodePen site and PRO Teams features, Google Chrome would occasionally encounter an "Error creating WebGL context" message, which would sometimes cause Chrome to go to an "aw snap... something went wrong" page. The WebGL error was occurring on the CodePen home page and was related to the sponsor ad in the footer.

CodePen support advised ProgrammableWeb that a Content Security Policy that had been rolled out very recently was causing errors. The Content Security Policy is a security upgrade that stops XSS (Cross-Site Scripting), which helps protect CodePen site users from malicious code.

The code causing the WebGL error in Chrome was fixed by CodePen the same day.

Wish List

The CodePen Team PRO account includes some great features that allow multiple users to collaborate on front-end development projects, as well as to showcase their work as a team.

With that said, I'd like to see a few more features added to CodePen (Free and/or PRO accounts), such as the option to connect Dropbox, Box, Google Drive, Bitcasa and other cloud storage accounts to CodePen user profiles. This would allow CodePen users to easily back up their complete Pens (including assets hosted on CodePen) to their preferred cloud storage provider.

It would also be nice for the Team PRO Account to have the ability to fork private Pens. This would make it possible for team members only to fork a team-owned private Pen. The Pen would remain private, but would be forked to the team members' own individual CodePen accounts.

JS Bin and CSSDeck feature the ability for users to create Codecasts. A Codecast lets users record the code that is typed into the editors. The recording can be played back like a video, making it a great teaching and presentation tool. This would be a nice feature to have available on the CodePen platform.

I'd like to see the number of Team PRO account members allowed in Collab Mode increased from two to six. The CodePen Super PRO account currently allows up to six users in Collab Mode, but the PRO Teams account allows only two. It would make more sense for the Team PRO account to allow up to six users in Collab Mode, as it's designed for groups working together as teams. Team PRO account users are more likely to use Collab Mode with multiple users.

I'd also like to see the number of send-to-phone messages allowed per month for the Team PRO account increased from 100 to 1,000 (same as the Super PRO account). The Team PRO account is designed for groups of people, so it would make sense to increase the number of send-to-phone messages allowed per month.

Finally, it would be really nice for CodePen to provide an easy-to-use, read-only API to developers. A read-only API could be used by developers to create galleries of Pens or CodePen widgets that could be integrated in blogs and other websites. A read-only API could be used to chart CodePen statistics such as most Pens added to a category by week/month, most loved Pens, etc. There is a tags page that does display the number of Pens in each category. However, it would be easier and probably more up to date to retrieve these numbers using an API.

Conclusion

The focus of this product review is on Team PRO account features, so many of CodePen's standard features are not covered in this article.

The closest comparable code playground to CodePen is CSSDeck. Both sites have many of the same features, and they both focus on the visual aspects of code as well as the functional. Both CodePen and CSSDeck display Pens/bins in nicely designed galleries that allow users to see beforehand what the code will actually do. CodePen appears to have a much larger community of users than CSSDeck, however.

Many of the features that CodePen offers only in PRO accounts are available to CSSDeck users for free. However, some of the features included in CodePen PRO accounts are not available at all on CSSDeck, JS Bin or JSFiddle. Companies and groups of developers that would like to use CodePen PRO features would benefit from using a PRO Teams account.

Choosing the code playground that is best for you and your projects is really a matter of personal preference and budget. However, at the time of publication, CodePen and CSSDeck provide a better user experience and offer users more features than JS Bin and JSFiddle.

CodePen has come a long way since launching in June 2012 and has made great strides in adding useful features and building a community. However, some of the more popular CodePen PRO features are available on CSSDeck, JS Bin and JSFiddle for free. Adding new features like the ones suggested in this article would help differentiate CodePen from the other code playground sites. It would also help to make the PRO plans even more beneficial and valuable to users.

Side-by-Side Comparison Chart

To help illustrate the difference in features between CodePen, CSSDeck, JS Bin and JSFiddle, a comparison chart is included in this article below. It is not a comprehensive side-by-side comparison of platform features. The chart primarily compares CodePen Team PRO account features against the features of the other code playgrounds.

View Full Size Chart on CodePen

Janet Wagner Janet is a data journalist and full stack developer based in Toledo, Ohio. Her focus revolves around APIs, data visualization, machine learning, and data-driven journalism. Follow her on Twitter: @webcodepro and on Google+

Comments