The Unlikely Founder: How Chris Coyier Went From Ceramics to CodePen

You may know Chris Coyier as the affable co-host of ShopTalk Show, the curator of the popular CSS-Tricks blog, or the co-founder of CodePen, an online code editor used by over 2.5 million developers. But did you know he originally studied art and worked in the printing industry before becoming a professional web designer?

Growing up in Madison, Wisconsin, Chris always had an interest in computers but it took a high school programming class in Pascal to really ignite his passion. He went on to study Computer Science at the University of Wisconsin-Whitewater but found the courses uninspiring compared to the exciting work his artist friends were doing. In a bold move, he switched majors and graduated with a Bachelor of Arts in ceramics in 2004.

After college, Chris worked in the digital printing industry doing pre-press work – the step between design and production where files are prepped for the printing press. In a way, it foreshadowed his future career.

"It‘s a kind of art," Chris explained in an interview. "You can think of it like the CSS of print, where you take a design and turn it into reality."

But Chris wasn‘t satisfied with his career path. Wanting to do something more creative, he started learning web design and development on the side. When his band needed a website, it became the perfect excuse to make one.

He realized that the web was his true calling. With some lucky timing and family connections, he was able to land a job as a web designer in 2006 and "became a professional web designer overnight." He worked his way up to an agency in Madison where he rapidly developed his front-end development skills.

Documenting the Journey

In 2007, Chris started CSS-Tricks, a blog where he could document everything he was learning about web design, especially CSS. Little did he know it would become one of the most popular web development blogs, reaching over 2.5 million developers per month and generating over $80,000/month in revenue through sponsorships and affiliate deals.

A key part of CSS-Tricks was providing live demos of the concepts and techniques that Chris was writing about. At first, he would just upload demo files to the CSS-Tricks server. But then tools like JSBin and JSFiddle came along that made it easy to provide editable code samples right in the browser. This was a game-changer.

"I thought I could do that too," Chris said. "It was a project I could wrap my head around. I wanted to make my own version of those apps and host it myself."

This was the seed that eventually grew into CodePen. But a few other key developments happened along the way.

Hatching the Idea for CodePen

After his time in Madison, Chris took a job with the web form software company Wufoo in Tampa, Florida. It was there that he met two crucial colleagues – full-stack developers Tim Sabat and Alex Vazquez. The three of them worked together at Wufoo and continued on after the company was acquired by SurveyMonkey in 2011 for $35 million.

Meanwhile, Chris was getting more serious about building his own code playground to use on CSS-Tricks. Together, the three friends decided to make it a real product and company. They were motivated by the idea of building something for an audience they knew well – fellow web developers. In 2012, they launched a beta version of CodePen as a side project.

Initial growth was steady if unspectacular – after one year, CodePen had 50,000 registered users and was making about $1000 per month from its Pen Previews feature. But the team kept shipping new features, engaging with the community, and improving the product experience. Their hard work started to pay off.

In 2015, CodePen hit a million registered users and introduced its Pro plan, which cost $9/month for features like private Pens, Professor Mode for classroom settings, and live view. Revenue grew to over $25,000 per month. That allowed the founding team to go full-time on the business.

Today, CodePen has over 2.5 million registered users, with 100,000 weekly actives. It‘s become the go-to code sharing and discovery platform for front-end designers and developers. Let‘s take a closer look at how it works.

Inside CodePen‘s Architecture

On the surface, CodePen is a code editor that allows developers to write HTML, CSS, and JavaScript and see the results in real-time. Pens can then be saved, forked, commented on, and shared across the web. But under the hood, there‘s a lot powering this functionality.

The core of CodePen is an Express server written in Node.js that serves the application and handles the API. The front-end is a complex dance between Vue.js for the editor interface, React for rendering Pens and Projects, and a custom Firepad editor component for the collaborative editing engine. CodePen makes heavy use of web workers to run code previews in a separate thread and provide scalable performance.

On the back-end, Pens and Projects are stored in MySQL, while user and meta data lives in Redis. Microservices written in Go handle specific functions like preprocessing Assets and Pen Previews. The infrastructure runs on AWS with a multi-region setup for redundancy and performance.

One of the biggest technical challenges has been making the code editors performant and real-time. CodePen uses the open-source Firepad library to provide Google Docs-style collaboration, but has customized it to support its specific language modes and key mappings (e.g. Vim and Emacs). Even with web workers and debouncing, providing a smooth typing experience with code highlighting and Auto-Updating Previews for millions of users is no small feat.

Navigating the Ecosystem

CodePen is far from the only code playground on the block these days. In the early years, its main competitors were JSBin and JSFiddle, which were also side projects started by individual developers. But now the landscape includes players like:

• Codesandbox – A web-based IDE for React, Vue, and more
• Repl.it – A collaborative IDE supporting 50+ languages
• Glitch – A friendly creative coding community
• Stackblitz – An online IDE for Angular and React projects

In many ways, CodePen has become a pioneer and elder statesman of this space. It may not have all the latest framework integrations and IDE features, but it has a strong brand, an established community, and a focus on creativity and education.

"We‘re not trying to be all things to all people," Chris explained in an Episode of CodePen Radio. "CodePen is a playground. It‘s not trying to be the place you build and deploy entire production apps. We want to do one thing and do it well."

That one thing is helping developers learn, experiment, and share what they create with the world. CodePen does that through community features like:

• Spotlight – A daily digest of the most hearted Pens
• Challenges – Monthly prompts like "404 Page" or "Pure CSS Drawing"
• Topics – A tag system for discovering Pens by subject like data visualization or form UI
• Spark – A mini social network for developers, with user profiles and a chronological feed

CodePen also offers a wealth of learning resources including documentation, tutorials, and livestreams. It even has special accounts for teachers, which allow them to create classrooms, assign homework, and monitor student progress.

The Business of Developer Tools

Monetization is always a challenge for developer tools and Chris admits it‘s something CodePen has wrestled with over the years. Today, CodePen makes money through a combination of Pro plans, ads and sponsorships, and digital goods like sticker packs.

The core product is free to use for public Pens, but users can upgrade to a Pro plan for $8/month (or $96/year) to get features like private Pens, real-time collaboration, and professor mode. CodePen also sells team plans for businesses and enterprises, which allow them to manage multiple users under a single account.

As for sponsorships, CodePen runs weekly sponsored Challenges in partnership with companies like Netlify and Hasura. These allow businesses to engage with the CodePen community by providing a theme or prompt for developers to create Pens around, with the best creations getting highlighted.

It‘s a model that‘s working well enough for now – CodePen is profitable and has been able to grow the team to 11 people working across product, engineering, marketing, and support. But there‘s always more that could be done.

"I‘d love to eventually double or triple our team," Chris said. "I want to be a manager. I‘ve never had that opportunity, and I would love to have it one day."

Coding with Purpose

As CodePen has grown, Chris‘s role has evolved from an individual contributor wearing many hats to an executive overseeing a team and a business. It‘s been a challenging transition at times.

"I struggle with that actually," he admitted. "Sometimes I feel like the least useful person at CodePen. I still add value in other ways, but I‘m not useful in the same sense as [my teammates] are."

But Chris takes pride in enabling his team to do their best work and continuing to promote a positive, inclusive culture amidst the sometimes toxic culture of tech Twitter. He uses his platform to lift up others and contribute to open source, whether it‘s through his involvement with CSS-Tricks, Shop Talk Show, or projects like his Eleventy site generator.

"Positivity is also really important to CodePen and our team embraces it," he said. "We never let off a negative vibe, we never discourage each other, especially not publicly. We have an inclusive spirit. That‘s just vital to me. It feels safe here, comfortable, and that‘s how good communities are born."

Personally, Chris has been open about his struggles with mental health, especially impostor syndrome and workaholism. He tries to model healthy work habits for his team and the wider industry – actually taking vacations, pursuing hobbies like woodworking, and knowing when to log off Twitter.

"I‘m not immune from it, but I feel like I deal with it pretty well considering," he said. "I have a good support network around me. And the mountain biking helps. It‘s meditative for me to just be out there and forget about work for a bit."

Looking to the Future

As the web development industry continues to evolve, Chris sees CodePen playing an important role in making new technologies and techniques more accessible and approachable. He‘s excited about the rise of no-code tools like Webflow and Bubble, and thinks code playgrounds can help people start to "peel back the layers" and learn what‘s happening under the hood.

While component frameworks like React have come to dominate the industry, Chris remains a passionate advocate for the web platform and fundamental web technologies.

"My hope is that CodePen helps people realize that the basic web is pretty amazing," he said. "With HTML, CSS, and JavaScript, you can build almost anything. I‘m not against frameworks, but I do think there‘s a lot of lost knowledge of how capable the web is on its own."

As for advice for aspiring founders and creators, Chris encourages people to just start building, even if it‘s small.

"Make the things that are useful to you," he said. "There‘s no minimum viable audience. An audience of one, yourself, is enough. If you do that, everything else can flow from there. Just start."

That‘s certainly been the case for CodePen, which grew out of a personal need and passion. Almost a decade in, Chris is still excited to keep building new features, supporting the community, and seeing what people create.

"I‘m absolutely stoked to keep working here, and honestly I hope we can do it forever," he said. "If it‘s the last job I ever have, that‘s fine by me. That‘s what I‘d consider a success."