CodePen

Dave Rupert

DevOps.com

<h2>What changed</h2>
<p>CodePen 2.0 is a ground-up rebuild, five years in the making. The old setup had three separate editors — Classic Pen, Projects, and Spark — each with their own constraints. Version 2.0 collapses all of that into a single file-based environment.</p>
<p>The most significant structural change is the file system. The old three-file limit (HTML, CSS, JS) is gone. You can now manage multiple files, multiple pages, and a <code>package.json</code> for npm dependencies. ES module imports work as you’d expect. It’s closer to a local dev setup than the scratchpad CodePen used to be.</p>
<h2>The Blocks compiler</h2>
<p>The new Blocks system is how you configure your build pipeline. Instead of manually wiring up preprocessors, you stack them visually — Sass, TypeScript, Tailwind, Vue, Lightning CSS, MJML, Nunjucks — and CodePen handles the Vite-powered compilation underneath. Using the right file extension is often enough to trigger the right processor.</p>
<p>MJML support is a good example of how this extends the tool’s reach. You can now build and preview HTML emails directly in CodePen, which wasn’t really possible before.</p>
<h2>Deployment</h2>
<p>One-click deployment to a <code>*.codepen.app</code> subdomain is new, with custom domain support available. This is the feature that most clearly shifts CodePen’s identity. It’s no longer just a place to share demos — you can ship small sites directly from the editor.</p>
<p>That’s genuinely useful for quick projects. It’s also worth flagging for teams: easy deployment without clear ownership can quietly create shadow infrastructure. If you’re in a platform or DevOps role, it’s worth thinking about governance before people start deploying things nobody’s tracking.</p>
<h2>Other additions</h2>
<ul>
<li><strong>Version history</strong> — took over ten years to ship, apparently, but it’s here now</li>
<li><strong>Real-time collaboration</strong> — invite someone to co-edit live; The Keyframers used it to live-stream a collaborative session during launch week</li>
<li><strong>Omnibar</strong> — quick navigation across the editor</li>
<li><strong>Default templates</strong> — starting points that replace the blank-slate friction</li>
<li><strong>Minimal UI mode</strong> — strips the interface back for those who want the Classic Pen feel without switching editors</li>
</ul>
<p>The Classic Editor still exists and is still accessible, just no longer the default entry point.</p>
<h2>What’s not here yet</h2>
<p>AI integration is being explored but isn’t available yet. The team says they’re approaching it carefully, which is a reasonable stance given how many tools have bolted on AI features that don’t actually improve the workflow.</p>
<h2>The bigger picture</h2>
<p>Chris Coyier called this the largest personal career accomplishment of his life — more work than building the original CodePen. That tracks with what the product actually is now. It’s not a demo tool with some new features. It’s a lightweight development and hosting platform that happens to still be approachable for beginners.</p>
<p>The fact that the UI still feels familiar despite the scope of changes is probably the most impressive part. Power users get a real file system, a proper build pipeline, and deployment. Beginners still get a place to paste some HTML and see what happens. That’s a hard balance to maintain, and CodePen 2.0 mostly pulls it off.</p>


Collections

CodePen 2.0 is officially released after five years of development, merging the Classic Pen and Project editors into a unified, extensible editor. Key additions include a real file system (replacing the old HTML/CSS/JS three-file limit), ES module support, version history with rollback, one-click deployment to a codepen.app subdomain with custom domain support, real-time collaborative editing, and an Omnibar command palette. The standout new feature is the Blocks system — a visual build pipeline configurator supporting Vite, Vue, Tailwind, Lightning CSS, MJML, and Nunjucks without manual config files. The Classic Editor remains accessible for beginners and educators. AI features are planned but not yet available. CodePen has remained bootstrapped throughout development.

CodePen 2.0: what's new and what's changed

<p>Why have I got to log in to search for pens? Who you selling my data to?</p>


<p>I hope this doesn’t completely destroy what I loved about CodePen in the first place.  There were other platforms I’d use if I wanted something “closer to a local dev setup”.  “the scratchpad CodePen used to be” was perfect specifically because it had limitations.</p>
<p>The one thing I can relate to - clearly this was a life goal and major challenge for Chris.  Sounds like he wasn’t doing this because there was a market demand.</p>
<p>But I’m calling it now - give it a year and the scratchpad platform will be back by popular demand and marketed as “CodePen Light”!!  Or perhaps CodePencil :)</p>
