JSON 编辑器
PuppyOne 的可视化 JSON 编辑器让你轻松管理结构化数据。
界面概览
┌─────────────────────────────────────────────────────────┐
│ 📁 products [+] [-] │
│ ├── 📄 [0] │
│ │ ├── id: "SKU-001" [✏️] │
│ │ ├── name: "Widget Pro" [✏️] │
│ │ └── price: 99.99 [✏️] │
│ ├── 📄 [1] │
│ │ └── ... │
│ 📁 categories [+] [-] │
│ └── ... │
└─────────────────────────────────────────────────────────┘基本操作
编辑值
- 点击任意值（如
"Widget Pro"） - 直接修改
- 按
Enter确认，或Escape取消
添加字段
- 点击父节点旁的 [+] 按钮
- 选择类型：
- 📝 String（字符串）
- 🔢 Number（数字）
- ✅ Boolean（布尔）
- 📁 Object（对象）
- 📋 Array（数组）
- 输入字段名和值
删除节点
- 右键点击节点
- 选择 Delete
- 确认删除
移动节点
- 拖拽节点到目标位置
- 释放完成移动
快捷键
| 快捷键 | 功能 |
|---|---|
Enter | 确认编辑 |
Escape | 取消编辑 |
Tab | 移动到下一个字段 |
Ctrl/Cmd + Z | 撤销 |
Ctrl/Cmd + Shift + Z | 重做 |
Ctrl/Cmd + S | 保存 |
批量操作
复制粘贴 JSON
- 选中一个节点
Ctrl/Cmd + C复制- 选中目标位置
Ctrl/Cmd + V粘贴
导入 JSON 片段
- 点击工具栏的 Import JSON
- 粘贴 JSON 代码
- 选择导入位置
数据类型
编辑器会自动识别和显示数据类型：
| 类型 | 显示 | 示例 |
|---|---|---|
| String | "text" | "Hello World" |
| Number | 123 | 99.99 |
| Boolean | true / false | true |
| Null | null | null |
| Array | [...] | [1, 2, 3] |
| Object | {...} | {"key": "value"} |
搜索和过滤
全局搜索
- 按
Ctrl/Cmd + F - 输入搜索词
- 高亮显示匹配结果
JSON Path 导航
直接输入 JSON Path 跳转到指定位置：
/products/0/name → 跳转到第一个产品的名称
/categories → 跳转到分类数组验证和错误提示
编辑器会实时验证 JSON 格式：
- ✅ 绿色：数据格式正确
- ⚠️ 黄色：有警告（如重复的键）
- ❌ 红色：格式错误（如无效的 JSON）
与代码编辑器切换
如果你更习惯直接编辑 JSON 代码：
- 点击工具栏的 Code View
- 直接编辑 JSON 文本
- 切换回 Tree View 查看结构化视图