简介

CodeSandbox 是由前微软工程师 Ives van Hoorne 于 2017 年创立的在线代码开发平台，最初专注于 JavaScript 和 React 应用开发。作为 Web 开发领域的先驱，CodeSandbox 提供了完整的云端开发环境，支持 npm 包安装、依赖管理、实时预览等特性。2023 年，CodeSandbox 推出了 AI 功能Sandpack Copilot，可以根据自然语言生成代码、解释代码逻辑、修复 Bug。CodeSandbox 被众多前端开发者使用，是学习和开发 React、Vue、Node.js 等技术的理想平台。

官网：https://codesandbox.io

主要功能

• 云端开发环境：浏览器中直接开发 Web 应用，无需本地配置。
• 完整的 npm 支持**：可安装和使用任意 npm 包。**
• 实时预览：代码修改即时反映在预览窗口。
• 模板市场：提供 React、Vue、Next.js、Nuxt 等模板。
• AI 助手：Sandpack Copilot 支持代码生成和解释。
• 实时协作：多人同时编辑，分享和演示代码。
• 静态部署：一键部署到 CodeSandbox Cloud 或 Vercel。
• 嵌入功能：可将 Sandbox 嵌入到文档或博客中。

适用场景

CodeSandbox 适用于多种 Web 开发场景。前端学习：无需配置环境，快速学习 React、Vue 等框架。原型开发：快速验证 UI 想法和组件设计。技术演示：在演示中展示可运行的代码示例。Bug 复现：创建最小复现案例用于调试和求助。开源贡献：轻松 fork 和贡献开源项目。教学演示：教师可用于前端技术教学。对于 Web 开发者，CodeSandbox 是效率提升的利器。

安装与使用

# macOS
brew install --cask codesandbox

# 或下载安装包
# 访问 https://codesandbox.io/download

# 安装 CodeSandbox CLI
npm install -g @codesandbox/cli

# 初始化本地项目
cs init

# 启动开发服务器
cs dev

<iframe
  src="https://codesandbox.io/embed/YOUR_SANDBOX_ID"
  style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
  title="your-sandbox"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

同类工具对比

官网与入口

官网：https://codesandbox.io

GitHub：CodeSandbox GitHub

使用方式：提供免费版和付费版，支持网页端和桌面端。

价格与版本

具体价格以官网最新公布为准

使用技巧

常见问题

小结