CodeSandbox 是一个在线代码编辑及实时预览的 UI 组件,支持浏览器环境下编写 html/js/css/ts/vue/react
等类型的代码并在沙盒环境下实时运行预览。
- 支持代码在线编辑及实时预览
- 内置
Vue3 / React / Typescript / Javascript / HTML / CSS
等多种代码解析器 - 支持通过导入 ESModule 格式(
import/export
) npm 包 - 支持多文件解析,并支持新增/删除文件
- 代码可压缩添加至 URL 参数,通过外链分享
浏览器 script
引入:
<script src="https://unpkg.com/@code-sandbox/core"></script>
使用 npm
或者 yarn
安装:
npm install @code-sandbox/core
# or
yarn add @code-sandbox/core
浏览器 script 使用:
<script src="https://unpkg.com/@code-sandbox/core"></script>
<script>
new CodeSandbox('#container', {
appType: 'react',
});
</script>
ES6 使用:
import CodeSandbox from '@code-sandbox/core';
new CodeSandbox('#container', {
appType: 'react',
});
- 支持 react 代码运行
- 增加侧文件栏以支持文件新增/删除/重命名
- 支持工具栏/上下/翻转等布局调整
- vuepress 插件支持
- 支持快捷联想的 npm 包引入
- 支持 vue2 代码运行
- 支持其他框架如 svelte