RunX - 即时运行 HTML、React、Vue、three.js 代码片段

粘贴代码,立刻运行

RunX 在你粘贴的瞬间运行一个文件的前端代码:完整的 HTML 页面、React 组件、Vue 单文件组件或普通 JavaScript。它会自动识别代码类型,加载代码中引入的库,检测到 Tailwind 类名时自动启用 Tailwind。适合试运行 AI 对话里生成的代码,也适合学习和测试 HTML、CSS,不用新建文件。

使用方式

  1. 01

    粘贴或编写代码

    把代码粘贴到编辑器,或从示例开始。上次的代码会保存在这个浏览器里。

  2. 02

    边写边运行

    每次修改后预览会自动更新。可以切换手机、平板宽度查看,或在新标签页打开。

  3. 03

    修复和分享

    错误会显示在控制台,可以一键复制回 AI 对话。分享包含代码的链接,或下载为 HTML 文件。

支持的代码

HTML
完整页面,或带 style、script 标签的片段。片段会被自动包装成完整页面。
React(JSX 或 TSX)
默认导出组件的文件会被自动渲染,支持 TypeScript。
Vue 单文件组件
支持 template、script setup(包括 TypeScript)和 scoped 样式,在浏览器中编译。
JavaScript
作为模块脚本运行,例如 three.js 场景或 canvas 动画。

快捷键

  • 立即运行CtrlEnter
  • 格式化代码ShiftAltF
  • 缩进(Shift+Tab 取消缩进)Tab
  • 在编辑器中查找和替换CtrlF

常见问题

可以引入哪些库?

任何能在浏览器中运行的 npm 包都可以:像平常一样写 import,例如引入 three 或 framer-motion,就会从 esm.sh CDN 加载。React、Vue、three.js、d3、gsap 都能正常使用。

运行看不懂的代码安全吗?

代码运行在沙箱框架中,无法访问本站、本站的存储和你的登录状态。别人分享的链接需要你点击“运行”后才会执行。

分享的代码存在哪里?

哪里都不存。代码被压缩后放在链接的 # 号后面,浏览器不会把这部分发送给服务器。

断网能用吗?

纯 HTML、CSS 和 JavaScript 可以。引入的库、Tailwind,以及 JSX 和 Vue 的编译,首次使用时需要联网。

哪些情况不支持?

多文件项目、从自己的目录引入(如 @/components)、Node.js API 和服务端代码。RunX 一次只运行一个文件。

更多工具