收藏备用：前端在线代码沙箱

前端开发和学习里，临时验证一段 HTML、CSS、JavaScript，或者快速试试 React、TypeScript 代码时，在线代码沙箱非常省事。下面这 6 个工具适合收藏备用，按“轻量预览、框架调试、离线使用、嵌入示例”等不同场景来选。

1. Flems

Flems 是一个专为嵌入网页而生的轻量级 HTML/CSS/JS 代码沙箱。它适合放在文章、文档或博客里，让读者直接看到可运行的交互示例，适合内容展示和小型演示。

Flems

一个专为嵌入网页而生的超轻量级HTML/CSS/JS代码沙箱模块。只需一个script标签，即可在你的文档或博客中添加可运行的交互式代码示例。

2. TryJS

TryJS 支持 JS/TS、HTML/CSS/JS、React 和正则表达式，而且可以直接导入 NPM 包。它所有代码都在浏览器端运行，不需要注册登录，很适合临时调试前端片段和快速验证依赖。

TryJS

一个集JS/TS、HTML/CSS/JS、React和正则表达式于一体的免费、开源在线代码沙箱。所有代码在浏览器端运行，支持直接导入NPM包，无需注册登录。

3. codi.link

codi.link 是一个极简的实时 HTML/CSS/JS 编辑器，主打无广告、无追踪和即时预览。它的定位很清晰，就是提供一个轻量、干净、打开就能写的在线编辑环境。

codi.link

一个极致简洁、开源的实时HTML/CSS/JS代码编辑器。无广告、无追踪，提供即时的代码预览和分享功能，是CodePen的轻量级替代品。

4. Web Maker

Web Maker 支持离线使用，适合在没有网络的时候继续调试 HTML/CSS/JS。它可以作为 Chrome 扩展和 PWA 运行，适合对隐私、速度和本地化体验比较在意的人。

Web Maker

一个极致快速、完全离线的HTML/CSS/JS代码沙箱，以Chrome扩展和PWA形式运行，零延迟、强隐私保护，是CodePen等云端工具的强力替代品。

5. Playcode

Playcode 是一个面向 JavaScript/TypeScript 的在线 IDE，提供无缝的 npm 集成，整体体验更接近本地编辑器。它适合做前端原型、练习代码，以及测试带依赖的片段。

Playcode

一个强大的在线JavaScript/TypeScript IDE，提供无缝的npm集成和类似本地编辑器的体验，是快速原型设计、学习和测试代码的绝佳选择。

6. LiveCodes

LiveCodes 是一个客户端驱动的代码游乐场，支持 React、Vue、Python、Go 等多种语言和框架。它的适用范围更广，也提供嵌入能力，适合需要更完整在线开发体验的用户。

LiveCodes

一个免费、开源、客户端驱动的代码游乐场，支持React/Vue/Python/Go等90多种语言和框架，并提供强大的SDK以便于嵌入到任何网页中。

如果你主要是做前端日常调试，优先收藏 TryJS、Playcode 和 codi.link；如果你需要离线环境，可以看 Web Maker；如果你要把可运行示例嵌进文章里，Flems 很合适；如果你希望一个工具覆盖更多语言和框架，LiveCodes 值得保留。