The new yet familiar CodePen 2.0

CodePen v2 is now released! Because I co-host a podcast with Chris I’ve had an up-close perspective at this monumental effort over the last five years. I know how much work has gone into this release and I applaud the team for hitting the finish line.

At the crux of the new experience is the new and improved editor. When you first launch into the v2.0 editor, your first response will probably be “Who moved my cheese!?” New is always uncomfortable, but there’s a fix for getting back to the old familiar UI…

• Hit ⌘ + U or CTRL + U to hide the new pen sidebar
• Install the Classic Block Template to remove ~14 lines of HTML (Optional)

Okay, now hit ⌘ + U or CTRL + U again, because what’s in the sidebar are all the new features and favorite parts I want to talk about.

An entire file system

The first thing you’ll notice when entering the new CodePen editor is a file explorer. That’s right! CodePen is breaking out of its three-file constraint and allowing you to build entire multi-file and multi-page websites.

A not-so-secret feature of CodePen was that you could mimic a file system in CodePen by using other pens as external resources, but referencing your custom reset.css by importing <user>/pen/<slug>.css wasn’t the JS module-like experience you come to expect from the modern web.

But gone are the days of 2,000 line JavaScript files, I can now import foo from './foo.js' like TC39 intended. I must admit that my more complex ideas were hitting the limit of what was comfortable to type into a tiny textbox. But now creating a folder of web components or JSON data files to loop through is easier than ever. I can build multi-file and multi-page prototypes (e.g. view-transitions! service-workers!) all without spinning up a local dev server. Digging up an old CodePen is much easier than finding an old folder on an old hard drive and it’s arguably the easiest way to put a custom webpage up on the internet right now.

Without drawing too many comparisons to competitors, CodePen at times felt a bit underpowered when compared to other online code editing environments. But those other services that spin up an entire Node.js Docker so that I can build my <fart-button> always felt like overkill to me. CodePen now occupies not just the entry-level and middle ground, but almost the entire spectrum of needs that I have for prototyping and small site building.

Versioning and deployments

Who amongst us hasn’t totally beefer’d up a good pen before?

Ruining an otherwise quality pen to idea creep or losing work to a browser refresh is always a possibility with online editors. It’s typically not world-ending for me and my …ahem… spartanly styled pens, but for sure results in a couple choice swear words. I imagine trending tab experts and newbie beginners find this even more frustrating. But now pens have a version history so you can roll back if necessary.

The deployments are better now too. Sometimes when building an idea, I like to send the “chromeless” version of the pen to non-developer friends or partners/clients to avoid overwhelming them with CodePen UI. This is also useful when debugging on your phone. The debug/URL worked, but if you’ve ever URL-hacked a private pen URL on your phone you know how un-fun that is. But now I can deploy the pen, get a nice codepen.dev URL or point my custom subdomain at CodePen’s DNS, and Airdop that URL to myself. A small but meaningful quality of life improvement for me.

Blocks

My favorite feature of the new CodePen is Blocks. One of my biggest gripes with modern web development is the amount of tooling it takes to get started. We’ve made it so damn complex to make a webpage, no wonder AI is so popular.

Blocks adds a visual layer to the opaque world of preprocessors, linters, and build processes. CodePen takes those processes and stack them on top of each other to form a predictable pipeline that you can easily visualize and understand how the sausage gets made. Imagine how this must feel for beginners compared to a dozen config files littering the root of your repo! Web development demystified.

I’ve wanted a UI like this for build processes for a long time: Gulp, Webpack, Vite, GitHub Actions, Azure DevOps Pipelines… I feel every service would be better if it had a Blocks UI. Like Scratch, but for servers. Experienced developers might even be less afraid to operate on their build tools if they had something like this.

I think CodePen has created something special here that most people won’t fully understand. A perfect fit for their beginner audience as well as their professional audience who don’t want to copy, paste, and manage config files to build a simple website or goofy pen.

A simplified but more powerful UI

A whole new product with a new file-system, versioned deployments, and customizable build chain smooshed in… yet the UI still feels familiar. It’s rare for products to evolve so intuitively. There’s more features, but everything feels more predictable. In the “classic” CodePen editor you’d have to surf through a handful of dropdowns and modals to tweak your settings and now a lot of that work is automatic. You want Sass? Add the .scss file extension. You want TypeScript? Add the .ts extension. CodePen will add all the Blocks for you with a default config that works.

It feels like all the configuration options are all co-located in the right place now. And the new omnibar search box is the ultimate get-out-of-jail-free card, exposing most of the features you’d need without all the hunting and pecking. Expanding the capabilities of the product while maintaining simplicity deserves some applause and I feel the team at CodePen walked this delicate line and succeeded.

A couple final thoughts

I’ve said it before (and I’ll say it again) I admire the team at CodePen and –despite my obvious biases– I think they’re one of the best product teams out there. In their podcast they give you a rare, honest, behind-the-scenes look at how they are thinking about and building their product. No one even comes close to their level of transparency.

Probably my favorite part of Team CodePen is that they’re not afraid to tackle the hard work and pay down technical debt when needed. They stay small, sweat the details, and take their time. There’s no back-pressure from venture capital to move fast and break your things. In my view it’s software done right.

Because I was part of the beta, I’m already using the hell out of CodePen 2.0. I’ve built dozens of big ideas (a browser-based camera, a service-worker based declarative shadow DOM solution, a half-dozen in-browser AI chatbots, a minimum viable design system, and more) that would have been either cumbersome or next-to-impossible in the previous editor. CodePen 2.0 is already enabling me to build bigger, better, and more complex ideas without leaving the comfort of one of my favorite applications on the whole entire internet.

So thanks, CodePen, for the huge upgrade and congrats to the team on the launch. 🎉