/code-sandbox

A code editor in sandbox.

Primary LanguageTypeScriptMIT LicenseMIT

CodeSandbox

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

NPM version GITHUB star MIT-license GITHUB-language

image

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