Notes ·
CodePen Grew Up
In The Launch of CodePen 2.0, Chris Coyier introduces the largest rebuild in CodePen’s history.
“Every Pen is deployable.”
I remember when CodePen first launched, and it has been a while since I made a Pen. The new editor gives me a good reason to go back and see what it has become.
The biggest change is that Pens are no longer limited to three familiar HTML, CSS, and JavaScript panels. Every Pen can now have a real file system, support multiple pages, combine different technologies through Blocks, and use modern tools such as Vite-powered Vue, Tailwind, Lightning CSS, MJML, and Nunjucks. CodePen’s compiler handles the wiring between those pieces. (CodePen)
Every Pen can also be deployed as a website on a codepen.app subdomain with a single click, updated manually or automatically whenever it is saved, and connected to a custom domain. That turns a quick experiment into something you can actually publish without immediately moving it into another repository and hosting pipeline. (CodePen)
The new version system may be the feature I appreciate most. Every Pen keeps recoverable versions, so an experiment can remain an experiment without every failed idea becoming permanent. Collaboration has also expanded beyond the old live session model. You can invite editors or viewers at any time, and simultaneous editing works in real time when everyone is present. (CodePen)
There are practical improvements worth checking out too:
- A much more capable file browser
- Better build diagnostics when code fails
- A more accessible editor for screen readers
- Templates for reusable starting points
- A configurable panel-based interface
- Minimal UI and a Classic Block for people who still want the original CodePen experience (CodePen)
I also respect that the launch is not centered around AI. CodePen says it is experimenting with ideas but wants to proceed carefully rather than attaching a chatbot to the editor merely because every development product is expected to have one now. (CodePen)
Designers should go explore the new layout, templates, responsive previews, and the ability to publish complete interactive concepts. Developers should look at Blocks, npm support, the file system, version history, collaboration, and one-click deployment.
The original CodePen made it easy to try one small idea in public. CodePen 2.0 looks capable of letting that idea grow considerably before you have to leave.
Read Chris Coyier’s The Launch of CodePen 2.0 and then go make a Pen.