YAML 格式化与查看工具

一个纯前端的单文件 YAML 工具，双击 index.html 即可使用，无需安装、无需后端、无任何外部依赖。

功能特性

• 📂 导入 YAML：支持点击选择文件、拖拽上传、粘贴 YAML 文本，或从 URL 导入。
• 🧹 结构化格式化：手写 YAML 解析器，解析失败时定位到具体行列，便于排查。
• 🌳 按层级展开 / 折叠：树形视图展示嵌套结构，支持：
  • 点击任意对象 / 数组行就地折叠或展开；
  • 工具栏一键「展开 / 折叠」；
  • 按层级展开：仅根、1 层、2 层、3 层。
• 📋 所有文本字段均可复制（鼠标悬停显示按钮）：
  • 复制键名（点击键）、复制值（点击值或「值」按钮）；
  • 复制字段访问路径（如 维护者[0].权限）；
  • 复制整个对象 / 数组的格式化 YAML；
  • 一键复制全部 YAML。
• 🎨 类型着色（字符串 / 数字 / 布尔 / null）、深浅色主题切换、自适应移动端。
• 📊 实时统计：文件大小、节点数、最大深度。

使用方式

直接用浏览器打开 index.html 即可：

open index.html        # macOS
# 或拖入浏览器

点击「示例」可快速体验效果。

技术说明

• 单一 HTML 文件，原生 HTML / CSS / JavaScript，零依赖、零构建步骤。
• 所有解析与渲染均在浏览器本地完成，不上传任何数据。
• 内置手写 YAML 解析器与序列化器，支持实用子集（见下表）。

YAML 子集支持范围

语法	支持情况
块级映射 key: value	✅ 支持
块级序列 - item	✅ 支持
缩进嵌套（空格）	✅ 支持
Tab 缩进	❌ 报错提示
行内注释 # 注释	✅ 支持（# 前需空白）
文档分隔符 --- / ...	✅ 支持（多文档时仅解析第一个并提示）
标量类型推断 null / true / false / 整数 / 浮点	✅ 支持
单引号字符串 '...'	✅ 支持（'' 转义为 '）
双引号字符串 "..."	✅ 支持（\\n \\t \\" \\\\ 转义）
流式数组 [a, b, c]	✅ 支持（单层）
流式对象 {k: v}	✅ 支持（单层）
块标量 |（保留换行）	✅ 支持
块标量 >（折叠为空格）	✅ 支持
块标量 |- / |+ / >- / >+	✅ 简化支持
重复 key	✅ 后者覆盖前者
锚点 & / 别名 * / 标签 !	❌ 不支持，遇到时报清晰错误
多行内联集合、复杂标签、自定义类型	❌ 不支持

在线访问

已通过 GitHub Pages 部署，可直接访问：

🔗 https://blog.wangruofeng007.com/yaml-viewer/

源码仓库：https://github.com/wangruofeng/yaml-viewer