Building CodePen on a Serverless Edge

Chris Coyier has spent more than 15 years building for the web. He launched CSS-Tricks in 2007, a publication that became a primary resource for frontend and full-stack developers. In 2012, he co-founded CodePen, an in-browser code editor designed for sharing and collaborating on HTML, CSS, and JavaScript examples.

Because CodePen’s product is built around hosting live code and embedding those “pens” across the web, performance optimization isn't just a nice-to-have—it has a direct impact on the company's operations. To keep things fast, CodePen increasingly relies on executing code and storing data directly on Cloudflare’s network. That means leaning on tools like Cloudflare Workers and Workers KV for a wide range of tasks.

"We pull content from an external CMS and use Workers to manipulate HTML before it arrives to the user's browser. For example, we fetch the original page, fetch the content, then stitch them together for a full response."

Workers runs on Cloudflare’s global network, letting CodePen insert intelligent middleware between origin servers and end users without spinning up extra infrastructure. The platform uses native Request and Response classes, and its streaming HTMLRewriter engine can parse, combine, and modify HTML in-flight without sacrificing performance.

Coyier has discussed CodePen’s architecture in detail on his YouTube channel, where he covered how Workers supports key features. A particular advantage is where the code executes:

"Cloudflare Workers are like serverless functions that always run at the edge, making them incredibly fast. Not only that, but the tooling around them is really nice. They can run at particular routes on your own website, removing any awkward CORS troubles, and helping you craft clean APIs. But they also have special superpowers, like access to KV storage (also at the edge), image manipulation and optimization, and HTML rewriting."

Workers KV for Caching and Expensive Jobs

CodePen also pairs Workers with Workers KV to handle data persistence. By storing cached results at the edge, the company avoids repetitive processing work. The pattern acts as a simple check-and-set system for heavy operations:

"We use Workers combined with the KV Store to run expensive jobs. For example, we check the KV Store to see if we need to do some processing work, or if that work has already been done. If we need to do the work, we do it and then update KV to know it's been done and where the result of that work is."

In a follow-up video, Coyier walked through building a simple serverless function with Workers KV and deploying it to Cloudflare. With KV, developers can persist complex data structures alongside a Worker function without compromising scalability or performance.

For Coyier and the CodePen team, the appeal isn’t just technical capability—it’s the development experience itself.

"The DX around them is suspiciously nice. Coming from other cloud functions services, there seems to be a just-right amount of tooling to do the things we need to do."

CodePen demonstrates how a full-stack application can be built around the Workers ecosystem. Combined with KV and HTMLRewriter, the platform shows how edge execution and storage can power highly-responsive applications across every part of a business.