你以为 CodePen 只能写三个文件？今天它直接变成了带部署的完整 IDE

做过正式项目的前端工程师，大概都被这个场景卡过：产品原型想放 CodePen 上跑一跑，结果项目有 8 个组件、2 个 Sass 文件、1 个 TypeScript 配置——CodePen 只让你传 3 个文件，卒。

这个天花板 2026 年 7 月 30 日正式被拆了。CodePen 2.0 发布，核心变化是把一个「玩具沙盒」彻底升级成了「能跑真实项目的在线 IDE」。

三个卡了八年的天花板

1. 文件数量——无限文件 + 真实目录结构

2.0 之前最多 3 个文件（HTML/CSS/JS 各一）。现在每个 Pen 都有完整文件系统，支持多层级文件夹，TypeScript、Sass、SCSS、MJML 想怎么加就怎么加，不再有任何限制。

2. 构建工具——Blocks 可视化流水线

之前想用 TypeScript？点开设置，一堆下拉菜单和开关。Sass？同样要手动找对应预处理选项。Blocks 的思路完全不一样：你只要在项目里放一个 .ts 文件，CodePen 自动识别它是 TypeScript，编译链路直接配好；放 .scss，Sass 流水线自动就绪。文件扩展名即配置，无需任何手动操作。

3. npm 包——原生支持 package.json

现在可以在 Pen 里直接 import lodash 了。npm 包管理直接进 IDE，不用再找 CDN 链接，不用手动在 HTML 里挂 script 标签。

几个真正影响工作流的新能力

版本历史：终于不用靠「复制一份新 Pen」来保存历史状态了。每个 Pen 现在有完整版本记录，随时可以回滚。

一键部署：写完的 Pen 点一下就能部署到 *.codepen.app 子域名。要接自定义域名？配一下 DNS 就行，CodePen 直接当静态托管用。

实时协作：另一个人的头像出现在编辑器里，光标直接在你的代码里走来走去——这个功能以前只有 VS Code Live Share 或者 GitHub Codespaces 才有的。

代码层面长什么样

Blocks 模式下，一个典型项目大概长这样：

/src
  index.html      ← 入口
  App.tsx         ← TypeScript 组件（自动识别）
  styles/
    main.scss     ← Sass（自动识别）
  utils.ts       ← 纯 TS 工具函数
package.json     ← npm 依赖

不用写任何构建配置文件，.ts 文件存在，TypeScript 编译器自动激活；.scss 文件存在，Sass 预处理器自动接入。Blocks 堆叠起来的顺序就是编译顺序，不需要你手动声明依赖关系。

什么没变

核心体验还在——写完代码，左边预览窗口立刻出结果。这是 CodePen 的招牌，2.0 没有动它。

纯 HTML/CSS/JS 的简单 Pen 操作逻辑完全没变，老用户可以直接上手，不需要重新学。

怎么判断该用 CodePen 2.0 了

不是所有场景都值得迁移到这个新版本，这里给一个判断标准：

值得迁移：需要多个文件配合的组件库演示、带 npm 依赖的工具函数 Demo、需要 Sass 或 TypeScript 的正式项目原型、需要分享给非技术背景同事看的带部署版本。

不值得迁移：纯 CSS 动效演示、单文件 JS 实验、快速验证一个想法的临时 Pen。这些场景老体验更快。

CodePen 2.0 的逻辑很清楚：它不想只当一个「贴代码等别人来跑」的地方，它想让你把整个项目丢上来，协作、部署、迭代，全部在线完成。八年沙盒，结束了。