JSfiddle

JSFiddle 是一个面向前端开发的在线代码沙盒，提供独立的 HTML、CSS、JavaScript 面板和实时结果预览，支持 React、Vue、Tailwind 等主流框架/库的快速集成，广泛用于原型设计、问题复现和技术分享。

核心功能与编辑器特性

编辑器已从 CodeMirror 切换为 Monaco（与 VS Code 同款），内置语法高亮、行号、自动补全和代码验证。支持多种预处理器：HTML 可选 HAML、Pug；JavaScript 可选 CoffeeScript、TypeScript、Babel+JSX、Vue、React、Preact；CSS 可选 SCSS、SASS、PostCSS（Stage 0+ 或 Stage 3+）、Tailwind CSS。每个 fiddle 可设置过期时间（1天/10天/1月/6月/1年/永久），支持自动保存和热重载（CSS/HTML）。

• AI 代码补全（实验性）：基于 Mistral Codestral 模型，需用户自带 API Key，Key 仅存于浏览器不存服务器
• 模拟异步请求：内置 /echo/json/、/echo/jsonp/、/echo/html/、/echo/xml/ 端点，方便测试 AJAX 和跨域请求
• CDNJS 资源库：可直接搜索并添加流行库（如 jQuery、D3、Three.js），自动注入为 SCRIPT 或 LINK 标签
• 布局切换：支持 Columns、Bottom results、Right results、Tabs (columns)、Tabs (rows) 五种面板排列方式
• Coder Fonts：内置多款等宽字体（含付费字体），可在编辑器设置中切换

协作与分享机制

每个 fiddle 生成永久链接，支持直接分享和 iframe 嵌入（可自定义是否显示编辑器、主题、自动运行等）。派生功能允许他人在你的代码基础上修改。付费 Collaborator 计划提供实时多用户协作编辑（类似 Google Docs）。

• 嵌入定制：可选择仅显示结果或完整编辑器，支持 Light/Dark 主题，可禁用自动调整大小和阻止父页面渲染
• 集合管理：可将 fiddle 归类到不同集合，支持排序和分类

PRO 版与收费详情

PRO 版定价 $8/月（月付）或 $80/年（一次性年付），提供无广告体验、预发布功能（如 Color Palette Generator 提前数月使用）、私有 fiddle 和私有集合、内置 JavaScript 控制台。当前有折扣码 CODECUP26 可享 PRO 五折。免费版保留核心编辑和分享功能，但含广告且无代码补全（AI 补全需 PRO 且自带 Key）。

• 技术栈变化：已移除 MooTools 依赖，JS 包体积缩小约 30%，页面加载更快
• 协作功能曾短暂故障，现已修复并迁移至 ESM 架构

常见问题

Q1：JSFiddle 的 AI 代码补全如何配置？

A1：需要 PRO 订阅，在 Mistral 官网注册免费 Experiment 计划获取 API Key，然后在 JSFiddle 侧边栏的 AI Code Completion 设置中粘贴 Key 即可启用，Key 仅存储在浏览器本地。

Q2：JSFiddle 免费版能创建私有 fiddle 吗？

A2：不能。免费版所有 fiddle 默认公开，私有 fiddle 和私有集合是 PRO 专属功能（$8/月或$80/年）。

Q3：JSFiddle 支持哪些前端框架的快速集成？

A3：通过 CDNJS 下拉菜单可直接添加 React（含 0.3.2 至 0.14.3 版本）、Vue（1.0.12 至 2.2.1）、AngularJS（1.1.1 至 2.0.0-alpha.47）、jQuery（1.9.1 至 3.4.1）、D3（3.x 至 5.9.2）等数十种库，并可选具体版本。

更多同类工具与网站,可在在线编程分类继续挑选。

信息核实于 2026年7月,具体以官网为准。