OpsKitPro logo
OpsKitPro_
Back to blog
工具2026-04-227 min

How the JSON toolkit works: design, implementation, use, and usage

Validation, repair, formatting, jq, schema, diff, and field extraction all live on one page.

This article reads through design, implementation, and usage in one flow.
Open tool
How the JSON toolkit works: design, implementation, use, and usage
About the article

This page is organized as a full read-through, from background to implementation and usage.

Article body

为什么把 JSON 工具做成工作台

01

JSON 工具最常见的使用场景,是把 API 返回、配置文件、日志片段或者抓到的对象先整理清楚。很多时候你不是想“写 JSON”,而是想“看懂 JSON”。

所以我把它做成一个多模式工作台:输入、修复、格式化、对比、转换和提取都放在同一页里。

Reference filessrc/app/tools/json/json-client.tsxsrc/app/tools/json/page.tsx

为什么要拆成几个功能块

02

JSON 的处理其实是多个不同任务的组合:有时你要修坏 JSON,有时要格式化,有时要跑 jq,有时要生成 schema。把这些任务硬塞到一个按钮里,用户只会更乱。

所以我把它拆成编辑器、修复、转换、比较、校验、提取几个区块,用户可以按自己的节奏逐步推进。

Reference filessrc/app/tools/json/components/FormatConverter.tsxsrc/app/tools/json/components/JsonDiffPanel.tsxsrc/app/tools/json/components/SchemaValidator.tsx

实现和用法

03

实现上我把 JSON 修复、格式转换、jq 查询、schema 校验和字段提取都拆成了独立 hook / component。这样每个功能可以单独测试,也方便以后继续加新模式。

用法上最简单的流程是:粘贴 JSON,先看校验状态,再决定是格式化、修复、转 YAML/TOML,还是直接跑 jq。需要对比时再切到 diff,需要抽字段时再进提取器。

Reference filessrc/app/tools/json/hooks/useFormatConvert.tssrc/app/tools/json/hooks/useJqQuery.tssrc/app/tools/json/hooks/useJsonRepair.tssrc/app/tools/json/hooks/useJsonStorage.ts