wlr19982cc / code-sandbox

A code editor in sandbox.

CodeSandbox

CodeSandbox 是一个在线代码编辑及实时预览的 UI 组件，支持浏览器环境下编写 html/js/css/ts/vue/react 等类型的代码并在沙盒环境下实时运行预览。

Feature

• 支持代码在线编辑及实时预览
• 内置 Vue3 / React / Typescript / Javascript / HTML / CSS 等多种代码解析器
• 支持通过导入 ESModule 格式(import/export) npm 包
• 支持多文件解析，并支持新增/删除文件
• 代码可压缩添加至 URL 参数，通过外链分享

Install

浏览器 script 引入:

<script src="https://unpkg.com/@code-sandbox/core"></script>

使用 npm 或者 yarn 安装:

npm install @code-sandbox/core
# or
yarn add @code-sandbox/core

Example

浏览器 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',
});

Todo

• 支持 react 代码运行
• 增加侧文件栏以支持文件新增/删除/重命名
• 支持工具栏/上下/翻转等布局调整
• vuepress 插件支持
• 支持快捷联想的 npm 包引入
• 支持 vue2 代码运行
• 支持其他框架如 svelte