Co-Founder Alex Vazquez Shares How CodePen's Development Playground Helps Frontend Dev Teams Create, Share, and Debug Code

Codepen Playground Helps Frontend Dev Teams Code

TL; DR: When CodePen started, the three friends behind it thought their side project wouldn’t last more than a few weeks. Now, the online code editor shows live previews of HTML, CSS, and JavaScript to give developers a responsive, stress-free space to tinker with new technologies, share their latest creations, and collaborate with other coders. We spoke with Co-Founder Alex Vazquez about how the team’s passion for design, development, and startup cultures has evolved into a full-service platform that continues to add features in response to feedback from an engaged user community.

No one intended for CodePen to be a business. Alex Vazquez, Tim Sabat, and Chris Coyier met up one day to start making a website — or as Alex puts it, to “do what nerds do when they get together.” He thought the project would last maybe a week, maybe a month.

The three friends were the first developers and designers hired at Wufoo, an HTML form builder that was sold to SurveyMonkey in 2011.

“SurveyMonkey was a great company, but we also knew how much we liked working at a small company, how much we liked being in control of developing things we really cared about, and being able to choose the way you get to build a company.”

Chris Coyier, the man behind CSS-Tricks, wanted to create a user-friendly way for frontend developers to show off their code. CodePen’s live coding environment features an in-browser code editor in which users create projects, called Pens. From there, developers can collaborate, critique, and find inspiration from other members.

The Co-Founders originally offered CodePen tools for free but have slowly evolved to the current freemium model. Pro features include cross-browser testing, asset hosting, and increased collaborative capabilities. According to Alex, the CodePen team keeps a strong balance between paid and free features.

“CodePen is pretty unique in that it’s not just the Pro users who keep us afloat,” he said. “It’s the community as a whole. Our users create 99.9% of the content on our site, and that’s why people come to CodePen. We just try to be responsible stewards of the community and their content.”

CodePen Provides All the Tools You Need to Create, Share, and Learn

Alex fondly calls CodePen’s quest to meet every user’s needs an “odd blessing and a curse.” He occasionally feels jealous about a friend whose livelihood is concentrating on how an online article scrolls up and down on Medium. Versatility, however, is CodePen’s signature accomplishment.

“We’ve always looked at how people are using CodePen and how we can support that or make it a better experience for them,” Alex said. From collaboration to asset hosting, every paid feature has a lightweight, free version for the rest of the community.

“We’ve kept this balance of working on things the community would love but, at the same time, creating just enough Pro features to continue growing the company,” he said.

1. Clean Editing Interface Packed With Options for HTML, CSS, and JavaScript

CodePen’s browser-based editor gives adjustable areas for your code and preview. Coding is very comfortable, given the editor’s syntax highlighting and Emmet integration. We also seriously appreciate the Tidy button — a one-click way to clean up your indentations and formatting.

Graphic of CodePen editor's features

CodePen gives frontend developers a stress-free space to write and preview code.

When you’re ready to share your Pen, the editor provides a copy-and-paste embed code, links to share on social media or through text message, along with an export to a zip file.

Other CodePen users can discover your work and elect to fork the code or heart it to show appreciation. Members can follow each other and curate Pens into collections to find useful Pens more easily.

2. Simple Blogging Platform Lets You Write About Code and Share Your Pens

The first tools the Co-Founders added to CodePen interface streamlined how developers could share their Pens.

“We saw that people were writing blog posts and constantly embedding Pens, so one of the first things we did was create a really simple way for you to embed a Pen inside of any website you run,” Alex said. “At the same time, not everyone wants to set up WordPress. Some people just want to write a quick article and show off a Pen.”

Naturally, the Co-Founders added a stripped-down blogging interface, which is included with every CodePen account. The blog editor supports Markdown, syntax highlighting, and custom CSS for individual posts.

3. Presentation Mode Maximizes Screen Space to Display Pens With a Projector

CodePen provides several different viewing modes for the various ways to share your Pens: Collab Mode lets multiple people type and edit code at the same time, while Professor Mode enables learners to watch their trainer work as they type.

Alex’s favorite view, Presentation Mode is geared toward conference demonstrations and showing Pens on a projector.

Collage of CodePen Presentation Mode

Coding demonstrations are easier for attendees to interact with through CodePen’s Presentation Mode.

“A lot of times, you’ll go to a conference and in order to get someone’s example running, you’ve got to download the repositories and install the dependencies before you can play with it,” Alex said. “Yes, that’s a 10-minute step you can do because you’re an amazing developer, but wouldn’t it be awesome if you could just do it in a few seconds?”

Users can share Pens with an abbreviated link and resize the editor and preview appearance. Smartly, CodePen removed all but the essential features so the platform loads quickly — even using the standard terrible wifi at conferences.

Features Coming in 2017 Range From Practical to Mysterious

CodePen continues to add and improve features, largely driven from user feedback. Even though CodePen members drive a lot of platform improvements, Alex said the team prefers to keep big changes close to the vest until they’re ready to go live.

“We don’t like to tell people we have something until we know we can release it and really impress them,” he said. “We’re not in stealth mode. It’s about not wanting to disappoint our community.”

Most-Requested Tool is Finally on the Way After Years of Development

One such update coming later this year is the reason Alex joined CodePen — except he thought the team would be able to offer it in the first year of the platform.

Four years later, CodePen is narrowing in on the ability to “create MiniPens inside of Pens, to say it in a really obscure way,” Alex said. The new feature will allow developers to dive deeper into Pens without the complexity of version control or local environments.

“We’re going to allow you to create more complicated solutions, but we’re trying to keep true to the heart of CodePen,” he said, alluding to the simple interface and instant feedback. “I think if you use CodePen, it’ll be fairly obvious what you would want to be able to do.”

Redone Payment Process Keeps the Company Running

On the other end of the update spectrum, Alex was happy to give us the “least exciting scoop you’ve ever heard.” He recently shifted his development efforts to rebuilding CodePen’s payment process and integrations with Stripe and Braintree.

“It’s all very boring, but it’s all very necessary to keep us running as a company,” he said. “Our initial stab at it was just something to get us up and running, and we’ve kind of just tacked onto it over the years.”

CodePen’s Remote Team Tackles Project Management With Passion

Alex, Tim, and Chris slowly grew CodePen’s team to eight employees over the past five years, with everyone working remotely.

“We don’t even have two people in the same state, much less the same city,” Alex said. Over the past few months, the team has formalized communications into project management sprints. Informal discussions still happen on Slack, but they track issues and time in GitLab.

Group picture of CodePen team

As a remote team, CodePen employees were sure to snap a picture during the only time they’ve met in person.

“We were incredibly inefficient, just taking on projects and forgetting that someone else was already working on it,” Alex said. “We realized this whole project management thing we had avoided at every large company we had ever worked for had a purpose. We’re not being super formal, but we want to add the least amount of project management that makes us efficient.”

The CodePen team records a podcast that gives a fascinating and transparent look at running a small web software business.

“It’s obvious because we’ve built a site for developers to show off their work, but everyone at CodePen really loves technology and the positive community,” Alex said. “Development is our business, but it’s also something we’ve enjoyed for a long time.”