🚀 Browser Sandbox

完全自主可控的代码预览系统

Service Worker + Virtual FS + Babel | 零后端依赖 | 实时预览

⚡

实时预览

毫秒级响应，无需等待服务器构建

💰

零服务器成本

完全在浏览器运行，无需后端服务器

🔒

完全自主可控

无第三方依赖，核心技术自研

⚛️
✅ 已验证

React + TypeScript

  • ✓React Hooks (useState, useEffect)
  • ✓TypeScript 转译
  • ✓JSX 自动转换
  • ✓npm 包自动加载
查看示例→
💚
✅ 已验证

Vue 3

  • ✓Composition API (ref, reactive)
  • ✓模板语法支持
  • ✓双向绑定 (v-model)
  • ✓CDN 加载
查看示例→
🎨
✅ 已验证

CSS + 动画

  • ✓外部 CSS 文件
  • ✓渐变和动画
  • ✓CSS Modules
  • ✓图片资源
查看示例→
🚀
✅ 生产级

全功能演示

  • ✓HMR 热更新
  • ✓Error Overlay
  • ✓IndexedDB 缓存
  • ✓Source Map
查看示例→

🛠️ 技术架构

核心技术

  • Service Worker✓ 网络拦截
  • Virtual FS✓ 虚拟文件系统
  • Babel✓ TypeScript/JSX
  • esm.sh✓ npm 包
  • HMR✓ 热更新
  • IndexedDB✓ 缓存

性能指标

  • 冷启动<1s
  • 热启动<100ms
  • 转译速度~50ms/文件
  • 服务器成本$0

✅ 已完成功能

核心功能

  • ✅ HMR 热模块替换
  • ✅ Error Overlay 错误层
  • ✅ CSS/CSS Modules
  • ✅ 图片/资源加载
  • ✅ Source Map 支持

框架支持

  • ✅ React + TypeScript
  • ✅ Vue 3 Composition API
  • ✅ Svelte (通过 CDN)
  • ✅ Solid.js (JSX)
  • ✅ IndexedDB 缓存