最佳在线代码编辑器

最适合你的在线代码编辑器，取决于你要做的是以下三类工作中的哪一类：用于渲染演示的前端 Playground（CodePen、JSFiddle），用于运行需要真实 Node 进程的项目的浏览器内开发环境（StackBlitz、CodeSandbox、Replit），或者用于把一句提示词变成可运行项目的 AI 优先构建工具（Bolt）。

设想一下：某个项目维护者请你提供一个最小复现（minimal repro）。你发过去一个 CodePen 链接，随后才意识到这个 bug 只有在执行 npm install 并完成 Vite 构建之后才会出现。一个小小的 bug 报告，就这样耗掉了你一个下午。

本文将这些工具分为上述三类，并按照相同的五项标准逐一评估。文章还会介绍 CodePen 2.0 带来了哪些变化、把作品迁移到其他地方有多容易，以及你的代码实际存放在哪里。桌面编辑器以及 GitHub Codespaces 这类云端虚拟机 IDE 不在讨论范围之内。

在线代码编辑器分为哪三类？

每一款在线代码编辑器都属于以下三类之一。所属类别决定了工具能运行什么，因此应先选类别，再选工具。

• 前端 Playground（CodePen、JSFiddle）： 你编写 HTML、CSS 和 JavaScript，页面会在实时预览中渲染出来。它们专为演示和小型复现而设计。
• 浏览器内开发环境： 这类工具运行真实的 Node 进程，支持安装依赖包和构建步骤。StackBlitz 借助 WebContainers 在标签页内运行 Node；CodeSandbox 的 Devboxes 和 Replit 则在远程机器上运行项目。
• AI 优先构建工具（Bolt）： 一条提示词即可生成完整项目，之后你再在此基础上迭代。

把 CodePen 和 CodeSandbox 放在一起比较，通常是犯了类别错误。CodePen 的定位是分享渲染后的演示，而 CodeSandbox 的定位是运行带有构建步骤和已安装依赖的项目。把不同类别的工具放在一起排名，只会得出误导性的结论。

CodePen 2.0 带来了哪些变化？

CodePen 2.0 让 CodePen 更接近项目工具，但并没有把它变成项目工具。CodePen 的发布博文显示其发布日期为 2026 年 7 月 23 日。博文介绍了一个统一的编辑器，它同时取代了旧版的 Pen 编辑器和 Project 编辑器，并在此基础上增加了新功能。

如果你习惯使用经典 Pen，以下变化值得关注：

• 单个 Pen 支持多个文件。 过去你需要把三个 Pen 串联起来，并从另外两个 Pen 中导入 JavaScript。现在这些文件可以放在同一个 Pen 中。CodePen 的 Files 文档指出，免费 Pen 最多只能包含三个文件，且不能存放图片等上传的媒体文件。PRO 套餐会提高文件数量上限，并允许使用媒体文件。
• 在 package.json 中声明 npm 包。 依赖项以带版本号的形式记录在清单文件中，而不再是粘贴 CDN URL。不过，这并不会真正安装任何东西。CodePen 的 Packages 文档解释说，编译器会把 package.json 转换为 import map，依赖包仍然从 esm.sh CDN 加载。
• 协作功能。 在付费套餐中，你可以邀请他人作为编辑者。你们既可以实时共同编辑一个 Pen，也可以在其他人离线时进行修改。PRO 用户还可以在另一个标签页或浏览器中打开 Live Preview，它会随着你的编辑实时刷新。CodePen 的“What changed”FAQ 对这两项功能都有说明。
• Blocks。 新的语言和工具以 Blocks 的形式接入，MJML 就是一个例子。What’s New 页面将 Blocks 描述为 CodePen 引入新技术的方式。
• 部署。 一键即可将 Pen 部署到 *.codepen.app 子域名。PRO 套餐还支持绑定你自己的域名。

经典 Pen 并未消失，经典编辑器仍可照常使用。将现有 Pen 转换为 2.0 版本是可选的，不过 CodePen 表示未来可能会将所有 Pen 统一转换为 2.0。

在已确认的 2.0 功能中，没有服务器运行时，也没有终端。如果你的复现需要 Node 开发服务器，CodePen 依然不属于合适的类别。关于文件数量以外的套餐限制，请查阅 CodePen 的定价页面。

其他工具

下面用同样的五项字段逐一介绍 JSFiddle、StackBlitz、CodeSandbox、Replit 和 Bolt。它们的定价模式都相同：提供免费版，付费套餐则增加容量和隐私选项。具体详情请查看各厂商的定价页面。

JSFiddle

运行内容： 在浏览器预览中运行 HTML、CSS 和 JavaScript。免费版： 足以满足公开代码片段的需求。仓库导入： 不支持适合仓库工作流的导入方式。嵌入/分享： 通过 URL 分享。可移植性： 需要手动把各面板中的内容复制出来。当 bug 能在一屏之内复现时，可以使用 JSFiddle。

StackBlitz

运行内容： 借助 WebContainers 在浏览器标签页中运行 Node.js。StackBlitz 的导入文档提醒，Node.js 之外的任何东西都无法运行。这就排除了 PHP、Python、Java 等语言，以及 MySQL、PostgreSQL 等需要独立服务器程序的数据库。免费版： 适合公开复现。仓库导入： 打开 stackblitz.com/github/{user}/{repo} 即可加载任意公开仓库。此后 StackBlitz 项目会跟随该仓库同步，你推送到 GitHub 的新提交也会在那里显示。嵌入/分享： 你可以在文档和博客文章中嵌入项目，也可以在 README 中添加 “Open in StackBlitz”按钮。如果你需要的是在自己的产品中内置一个编辑器，而不是嵌入一个演示，那就是另一类工作了，可参阅 Create your own Code Editor with React。可移植性： 如果从 GitHub 起步，可移植性很高。当复现需要执行 npm install 时，请使用 StackBlitz。

CodeSandbox

运行内容： Devboxes 在远程机器上运行项目。免费版： 提供免费版，付费套餐提供更多计算资源。仓库导入： CodeSandbox 的 GitHub 工作流正在调整。Together AI 收购了 CodeSandbox，并正在将 CodeSandbox 的产品迁移到自己的平台，因此在依赖任何导入流程之前，请先查阅最新文档。嵌入/分享： 共享工作区。可移植性： 取决于项目是否由代码仓库支撑。当团队需要一个共享的远程环境时，请使用 CodeSandbox。

Replit

运行内容： 运行在 Replit 基础设施上的托管工作区，不局限于 Node。免费版： 足以满足学习和小型原型的需求。仓库导入： Replit 的 GitHub 导入功能可通过 replit.com/github.com/{user}/{repo} 打开公开仓库。对于私有仓库，你需要在 replit.com/import 关联自己的 GitHub 账号。Secrets 和环境变量不会被一并复制。嵌入/分享： 分享指向运行中应用的链接。可移植性： 除非你主动导出，否则项目会一直保存在 Replit 中。当后端不是 JavaScript 时，请使用 Replit。

Bolt

运行内容： Bolt 生成的项目基于 WebContainers 在浏览器中运行。Bolt 由 StackBlitz 开发，其开源仓库介绍了相关技术栈。免费版： 足以试用一条提示词。仓库导入： 并非其主要工作流。嵌入/分享： 托管预览。可移植性： 在构建任何需要长期保留的东西之前，请先确认 Bolt 的导出选项。如果你想要的是集成在完整编辑器中的 AI，而不是把提示词转换为应用的构建工具，请参阅 AI-Powered Code Editors: Are They Actually Improving Developer Productivity?

平台锁定与导出

如果你的作品已经存放在 GitHub 仓库中，就可以轻松迁出某个工具。如果你的作品只以托管的 Pen、Fiddle 或 AI 构建工具项目的形式存在，你就会被困住。

StackBlitz 的 GitHub 导入功能让代码仓库始终作为代码的主副本，因此它是本文中最容易迁出的工具。仅托管在平台上的项目则需要手动提取。CodePen 的导出功能会提供一个 .zip 文件，其中包含你的源文件和最近一次构建的输出，但如果要在本地继续开发，你需要自行搭建构建工具。

如果这项工作很重要，请从代码仓库起步，或者尽早推送到仓库。一个可移植的项目只包含普通文件，不含任何特定于某个工具的内容：

{
  "name": "portable-repro",
  "private": true,
  "type": "module",
  "scripts": { "dev": "vite", "build": "vite build" },
  "devDependencies": { "vite": "^8.3.0" }
}

<!doctype html>
<html lang="en">
<head><meta charset="utf-8"><title>Portable repro</title></head>
<body>
  <div id="app"></div>
  <script type="module" src="/main.js"></script>
</body>
</html>

const app = document.getElementById('app');
app.textContent = `Rendered at ${new Date().toISOString()}`;

把这三个文件推送到 GitHub 后，就可以通过 StackBlitz 的 /github/ URL 打开该项目。它也可以在本地通过 npm install && npm run dev 运行。

隐私与离线使用

本文中的每一款在线代码编辑器都运行在别人的服务器上。代码在浏览器标签页中运行，改变的只是它的执行位置，而不是存储位置。StackBlitz 在标签页中运行你的代码，但除非项目存放在你自己的仓库中，否则它仍会把项目保存到自己的服务上。

如果代码绝不能离开你的机器，那么任何在线编辑器都不合适，包括那些在标签页内运行代码的编辑器。如果只是想快速编辑本地文件，How to use Chrome as a Code Editor and Debugger 介绍了如何使用 DevTools Workspaces 直接读写本地文件夹。

应该选择哪款在线代码编辑器？

没有哪款在线代码编辑器能全面胜出，请根据任务来选择：

工具所属的类别决定了它能运行什么；而你在该类别中选择的具体工具，决定了你迁出它有多容易。下次当你打开一个标签页、准备构建以后还要用到的东西时，请先把它放进 GitHub 仓库，再选择能够打开该仓库的编辑器。

常见问题

CodePen 2.0 会为 package.json 中的包执行 npm install 吗？

不会。CodePen 2.0 会检测 Pen 所使用的包，并将其列在一个可编辑的 package.json 中。随后，CodePen 编译器会把该文件转换为 import map，从 esm.sh CDN 加载每个包。整个过程不会安装任何东西，也不存在 node_modules 文件夹。你可以添加自己的 import map，CodePen 会优先使用你的条目，而不是自动生成的条目。

StackBlitz 能在 Firefox 和 Safari 中使用吗？

可以，但有限制。WebContainers 是 StackBlitz 和 Bolt 背后的运行时，它在 Chrome 及基于 Chromium 的浏览器中可获得完整支持。Firefox 提供 Beta 支持，Safari 从 16.4 版本起也提供 Beta 支持。Firefox 和 Safari 都未完全支持 WebContainers 所需的跨源隔离（cross-origin isolation）模式，因此编辑器内的服务器预览可能会阻止第三方资源加载。在独立窗口中打开预览即可规避这一问题。

StackBlitz 能打开私有 GitHub 仓库吗？

只有付费的 StackBlitz 会员才可以。公开仓库可通过 stackblitz.com/github/USER/REPO 免费打开，但导入私有仓库是会员专属功能。普通的 /github/ 链接加载仓库时不具备写入权限，你第一次保存时页面会重新加载为你自己的副本。在 GitHub 路径前加上 /fork，例如 stackblitz.com/fork/github/USER/REPO，即可直接打开一个全新的副本。