React Playground
个人技术项目
← 返回主页
用于快速构建预览React组件的纯前端项目
React
Monaco Editor
Babel
TypeScript
Web Worker
项目亮点
通过Babel/standalone实现文件编译,实现babel插件修改import source
使用Monaco Editor + Allotment实现网页版TypeScript编辑器
通过Web Worker拆分文件编译逻辑,优化长任务性能
使用iframe实现预览功能,postMessage进行错误提示
支持分享链接、下载代码、主题切换等功能
相关链接
在线体验
源码仓库
使用引导
导入组件
在左侧文件树中新增组件文件或直接拖入 JSON 配置。
实时预览
编辑器保存后通过 Web Worker 编译并在预览面板即时展示。
界面预览
在线编辑器与预览
文件管理与控制台