Mini Sandbox | 在线编辑前端【代码 / 组件】，并实时预览代码效果

前端

Mini Sandbox

  • 可以在线编辑前端【代码 / 组件】, 并实时预览代码效果
  • 代码自动保存到 URL 上, 分享网址即可分享代码
  • 静态资源全局缓存, 多个 Sandbox 之间资源共享, 拒绝浪费请求
  • 支持动态【 import / export 】引入或导出其他标签页的代码
  • 支持【 Vue SFC / React SFC 】单文件组件
  • 纯前端部署, 不依赖服务器, 静态页即可实现编辑和预览功能

Snipaste_2023-02-06_10-11-30.png

Document & 官方文档

官方文档 & 演示地址

【通过 NPM 包下载】

安装

npm i mini-sandbox@latest

使用

<div id="my-sandbox"></div>
import MiniSandbox from 'mini-sandbox'

new MiniSandbox({
  el: '#my-sandbox',
  files: {
    'index.html': {
      defaultValue: `<button onclick="alert('Hello')">按钮</button>`,
    }
  }
})

【通过 CDN 链接使用】

安装和使用

<div id="my-sandbox"></div>

<script src="https://unpkg.com/mini-sandbox@0.3.17"></script>
<script>
  new MiniSandbox({
    el: '#my-sandbox',
    files: {
      'index.html': {
        defaultValue: `<button onclick="alert('Hello')">按钮</button>`,
      }
    },
  })
</script>