不少前端开发者都使用过 CodeSandbox 或者 StackBlitz 来编写代码，这些在线沙箱环境非常方便。然而，由于它们的服务器大多部署在国外，国内访问时可能会存在较慢的情况。幸运的是，CodeSandbox 最近开源了一个全新的在线代码编辑器——Sandpack，通过它，我们可以轻松在自己的网站上集成一个完整的代码编辑器。

第一步：安装 Sandpack

首先，我们需要安装 Sandpack 的 React 组件：

npm install @codesandbox/sandpack-react

第二步：在项目中创建 Sandpack 编辑器

Sandpack 支持通过 template 配置项目模板，目前支持 Vue、React、Next.js 等主流框架，而且一切都能在浏览器中运行。

以下是一个简单的示例，展示如何在项目中集成 Sandpack 编辑器：

import { Sandpack } from "@codesandbox/sandpack-react";

const App = () => {
  const files = {
      "/App.js": 
      `export default function App() {
  		return <h1>Hello Sandpack</h1>
	}`,
  }
  
  return (
    <Sandpack
      files={files} 
      theme="light" 
      template="react"
    />
  )  
}

如上所示，我们只需定义一个简单的 React 组件，并将其传递给 Sandpack 组件。接下来，页面将自动显示一个可编辑的代码区域。

效果如下：

Sandpack 提供了一个完整的沙箱环境，我们在左侧编辑代码的同时，右侧的页面也会实时更新，呈现出修改后的效果。甚至可以运行nodejs的后端应用。

总结

通过 Sandpack，我们可以轻松地在自己的网页上集成一个代码编辑器，支持各种前端框架，并且提供实时预览功能。它不仅提升了开发者的工作效率，也让代码分享和协作变得更加简单。如果你也希望在自己的网站上提供类似的功能，不妨试试看这个强大的工具。