JSFiddle – Code Playground

JSFiddle是一个在线代码 playground，主要用于测试和运行HTML、CSS、JavaScript及相关预处理器代码。以下是网站的主要功能与板块介绍：

1. 核心代码编辑与运行功能
多语言与预处理器支持：
HTML可选择HAML语法；JavaScript支持CoffeeScript、Babel+JSX、TypeScript、Vue、React、Preact等；CSS支持SCSS、SASS、PostCSS（Stage 0+/3+）、Tailwind CSS等。
代码配置选项：
HTML可选择Doctype（如HTML5、XHTML 1.0 Strict等）和Body标签设置；JavaScript可添加Alpine.js、AngularJS、D3、React等扩展库；CSS可选择重置样式。
实时交互功能：
支持自动运行代码、仅运行验证通过的代码、自动保存代码；热重载CSS（修改后即时更新样式）、热重载HTML（实验性，即时更新结构）；结果面板会跟随主题（浅色/深色）变化。

2. AI代码补全（Beta）
基于Mistral的Codestral模型提供AI代码补全功能，需用户自行提供Mistral API Key（BYOK，浏览器存储Key，不保存至数据库）。补全时会结合HTML、CSS、JS三个面板的上下文提供建议。

3. 资源与工具
外部资源管理：
可通过CDNJS搜索并添加库（如jQuery、Three.js等），或直接将URL作为SCRIPT/LINK标签插入HTML面板。
异步请求模拟：
提供JSON（`/echo/json/`）、JSONP（`/echo/jsonp/`）、HTML（`/echo/html/`）、XML（`/echo/xml/`）的模拟接口，方便测试异步逻辑。
JSFiddle Apps：
内置小工具，如颜色 palette 生成器（一键生成配色）、CSS Flexbox生成器（可视化创建Flex布局）。

4. 个性化设置
编辑器行为：
可开启行号、自动换行、缩进（2/4空格）、代码自动补全；设置字体大小（默认、大、更大等）。
控制台设置：
选择是否在编辑器内显示控制台，是否在运行代码时清空控制台。
主题与外观：
支持浅色、深色主题，或跟随系统OS设置；代码格式使用Prettier，校验用Stylelint。

5. PRO会员功能
无广告（编辑器与列表页完全去广告）；
提前使用预发布功能（如颜色生成器）；
可创建 fiddle 集合（分类管理代码项目）；
私有集合与私有 fiddle（保护代码隐私）；
内置JavaScript控制台（调试更方便）；
优先体验早期AI功能。

6. 代码管理与分享
最近 fiddle 管理：
登录或未登录状态都能查看最近创建的 fiddle，未登录的 fiddle 会暂存（后期可登录转存）；支持设置 fiddle 过期时间（1天、10天、1个月至永久）。
下载与分享：
可下载 fiddle 为ZIP压缩的单HTML文件；支持生成嵌入代码（非自适应/阻塞父页面）或iframe，用于分享到其他网站。
模块导入：
可将其他 fiddle 作为模块导入（JS用`import [name] from ‘@jsfiddle/[username]/[fiddle].js’`，CSS用`@import url(‘@jsfiddle/[username]/[fiddle].css’)`）。

7. 其他更新与优化
编辑器从CodeMirror切换到Monaco（与VSCode同款），功能更丰富；
JS bundle体积缩小30%，加载更快；
支持Tailwind CSS（需在CSS面板选择），配合HTML热重载使用更高效；
代码 lint 与格式化工具升级为Stylelint（CSS）和Prettier（通用）；
3.0版本更新了UI，支持系统主题、结果面板主题同步、标题描述合并为单个字段、公共 profile 页重新设计。