使用过Antd的小伙伴应该很熟悉，Antd组件文档有在CodeSandBox和CodePen中打开直接预览和编辑的功能，这么炫酷且实用的功能具体是怎么实现的？
codesandbox.io[1] 是一个前端代码的在线编辑器，支持各种不同的框架，可以随时预览代码的运行结果。
创建沙盒
“在CodeSandBox中打开”是CodeSandbox提供的功能，让我们可以通过直接调用API来创建CodeSandbox沙盒。
CodeSandbox提供了几种导入到沙盒中预览的方式：
- 直接使用提供的公共模板
- 从GitHub导入：https://codesandbox.io/s/github
- 使用GitHubBox：将仓库地址中github.com替换为githubbox.com
- https://github.com/Iamxiaozhu/file-uploader-cli => https://githubbox.com/Iamxiaozhu/file-uploader-cli
- 安装浏览器扩展，打开GitHub，页面中会添加一个“在CodeSandBox中打开”的按钮
- 通过命令行从本地导入：
npm install -g codesandbox
codesandbox ./
- 通过调用API方式创建沙箱[2]：
CodeSandbox提供了通过API让我们可以通过编程的方式来创建sandbox。我们可以在文档里通过示例代码来创建sandbox，方便用户编辑和查看。
通过Get和Post请求调用https://codesandbox.io/api/v1/sandboxes/define，即可实现创建CodeSandbox沙箱。
Get调用Demo[3] Post调用Demo[4]
Important：CodeSandBox官方Demo[5]
Antd中示例代码跳转CodeSandbox、CodePen等：模板示例[6]
嵌入SandBox[7]
CodeSandBox还支持直接嵌入：在文档，博客和其他网站中嵌入沙箱，可以展示代码和预览效果:
以官方Demo[8]为例:
- 点击Share,这里选择Embed
- 自定义展示内容和主题，复制嵌入代码就可以了，是通过iframe标签来嵌套页面。
类似CodeSandBox的在线编辑器有很多，比如：CodePen[9]、StackBlitz[10]、JSFiddle[11]、JSBin[12]、JSRun[13]等。
微软和GitHub也都推出了自己的在线代码编辑器(和上面几个不同，只提供了代码编辑功能，无法实时预览)：
- Online VS：https://online.visualstudio.com/
- GitHub CodeSpaces: https://github.com/features/codespaces
其他相关：
Code-Server[14]
这里推荐一个可以自定义部署的在线代码编辑器：Code-Server。实际上就是VSCode的在线版本，支持安装VSCode插件，内嵌Terminal中会直接在服务器端运行，非常强大。
Sandpack[15]
Sandpack 是 CodeSandbox 的浏览器打包器。
参考资料
[1]codesandbox.io: https://codesandbox.io/
[2]通过调用API方式创建沙箱: https://codesandbox.io/docs/importing#define-api
[3]Get调用Demo: https://codesandbox.io/s/6yznjvl7nw
[4]Post调用Demo: https://codesandbox.io/s/qzlp7nw34q
[5]CodeSandBox官方Demo: https://codesandbox.io/examples/package/codesandbox
[6]模板示例: https://hub.fastgit.org/ant-design/ant-design/blob/master/site/theme/template/Content/Demo/index.jsx
[7]嵌入SandBox: https://codesandbox.io/docs/embedding#embed-options
[8]官方Demo: https://codesandbox.io/s/react-new?from-embed=&file=/src/App.js
[9]CodePen: https://codepen.io/
[10]StackBlitz: https://stackblitz.com/
[11]JSFiddle: https://jsfiddle.net/
[12]JSBin: https://jsbin.com/
[13]JSRun: http://jsrun.net/
[14]Code-Server: https://github.com/cdr/code-server
[15]Sandpack: https://github.com/codesandbox/sandpack
