简介
LiveCodes 把「装一套开发环境」这一步从试代码的流程里删掉了:打开网页就能写 React、Vue、Svelte、Solid、TypeScript、Python、Go、Ruby、PHP 等 90 多种语言与框架,编译和运行都发生在浏览器本地,不需要服务端配合。
它的用途集中在三件事上:随手验证一个想法或某个库的写法、做课堂与直播里的教学演示、给文档和教程嵌一段读者能当场改动的示例。当前版本 0.14.1,支持 npm 模块导入、控制台、编译产物查看、测试运行器、资源管理、代码片段、导入导出、部署与多设备同步,并大量使用懒加载,只下载当前语言用得上的那部分代码。项目默认私有,代码不离开本机,除非你主动分享、导出或部署。
它把自己定位成后端无关的开发者工具,不做社交化的代码托管社区。需要版本历史、多人协作、权限控制和持续集成的正式项目不适合放在这里;但用于教学、文档与原型验证,它是最省事的入口之一。
适用人群
最适合的是写教程、做课程和给开源项目写文档的人:把一段可编辑、可运行的代码嵌进网页,比贴一张静态截图有说服力得多,读者改一行就能看到结果。前端同学拿它对比 React、Vue、Svelte 的写法,或者验证一个 npm 库的 API,也不必为一次实验装齐整套依赖。
需要多人协作、版本历史和权限控制的正式项目不必用它:它不做社交化的作品托管,也不能当长期代码仓库。只是偶尔跑一段小脚本的人,用免费的托管版就够,不必为它自建服务器。
优缺点
- ✅ 免注册、免安装、免费且采用 MIT 许可证,打开网页就能写代码,试错成本几乎为零,商用不受限且站内没有广告。
- ✅ 代码与编译全在本机浏览器完成,项目默认私有,内部代码不会因为试用而外泄。
- ✅ 覆盖面广,从 React、Vue、Svelte 到 Python、Go、Ruby、PHP,一个页面就能横向对比不同技术栈。
- ✅ 教学与文档友好,可编辑的示例能直接嵌进网页,读者改代码立刻看到结果。
- ❌ 仍在公开测试阶段,升级可能引入破坏性变更,不适合直接承担长期存档。
- ❌ 不做社交化分享与团队权限管理,涉及协作的导入导出必须先登录 GitHub 账号。
使用方法
- 直接打开网页版就能用,不需要注册、安装或付费;界面语言跟随浏览器,中文环境下菜单本身就是中文的新建、打开、导入、启动模板与设置。
- 从欢迎页挑一个启动模板(空白项目、JavaScript、TypeScript、React、Vue 3 等)开始,或者用「导入」把 GitHub gist、仓库里的文件或子目录、GitLab 片段、zip 包、网页里的代码整段搬进来,改完马上在右侧结果页看到效果。
- 要把 playground 用回自己的网站或课程页:npm 安装 livecodes,或者在页面里直接引 CDN 上的版本化地址,调用 createPlayground 生成实例,再用 markup / style / script 预填代码;嵌入页还能执行 run、读写源码、格式化、取编译产物、拿分享链接、监听改动、跑测试并回读测试结果。
- 需要固定可复现的存档时用永久链接、URL 参数预填代码并把库版本写死,避免上游升级改坏线上示例;托管版把项目数据存在浏览器里,换机器或清缓存前先做一次备份或同步。
收费说明
完全免费,商用也不需要授权费。托管版和自托管版都不限制使用,项目数量与私有项目不限,站内没有广告,也不要求注册账号,唯一需要账号的地方是使用 GitHub 集成(导入仓库、导出 Gist、部署到 GitHub Pages)时登录 GitHub。LiveCodes 采用 MIT 许可证,允许自由商用;文档里没有订阅、额度或白标付费档,唯一的商业入口是自愿赞助,自建时只需自备服务器与域名的成本。对做站和做课程的人来说,这是一项零采购成本就能长期使用的工具。
平台支持
形态是「网站&在线应用」:主入口是浏览器里的在线 playground,不需要安装客户端,也没有官方桌面程序与手机 App。国内可以直接打开,站点走静态托管,无需自备代理;页面自身不依赖墙外字体与统计脚本,拦掉这些资源仍能正常渲染。移动端可用,窄屏会自动换成触屏优化的编辑器,还能用二维码把项目转到手机上继续改。托管版与自托管版共用一套代码,下载 release 放到任意静态服务器或 CDN 就完成私有部署,自托管时也能配合 SDK 使用;代码在沙箱环境里运行,SDK 与 API 齐全,方便接进自己的网站、文档站或教学系统。
截图













