CodePen 2.0 ships: real files, npm packages, live collaboration, and deploys

Chris Coyier has launched CodePen 2.0, calling it a bigger undertaking than building the original platform. The rewrite reframes what a “Pen” is: instead of the classic three-panel scratchpad, projects can now hold real files, pull in npm packages through a package.json for proper version management, and support co-editor invites with live, multi-person editing.

Early-week usage points to collaboration as the headline feature. Coyier describes forking a stranger’s Pen, consolidating scattered JavaScript into files, and working on it jointly, while the dev-education duo The Keyframers ran a multi-hour launch-day livestream on the new invite and real-time editing tools — sharing a Live View so viewers could interact with the demo as it was built. Bugs surfaced but nothing severe.

The platform is also expanding beyond front-end demos. A new “Blocks” system lets users work in specialized languages — Coyier added MJML to author marketing emails directly in CodePen — and the editor can now build and deploy small standalone sites, such as project and library landing pages, straight from a Pen. More Blocks are promised, signaling a push toward CodePen as a lightweight build-and-ship environment rather than just a demo sandbox.