Ứng dụng Vite + React + TypeScript để xử lý dữ liệu ngay trên trình duyệt: JSON format/validate, diff chi tiết, merge, JSONPath query, Pipeline transform, Privacy masking, Tree Explorer + Path Inspector, JSON -> YAML/XML/Properties/TypeScript DTO/Java DTO, JSON <-> CSV, escape/unescape, và JSON Patch (RFC 6902).
Yêu cầu: Node.js 20+.
npm ci
npm run devDev server mặc định: http://0.0.0.0:3000.
npm run lint
npm run build
npm run preview/editor: JSON editor (format, minify, validate)./diff: so sánh hai JSON bằng Monaco DiffEditor, cóFormatcho cả 2 pane và panel diff chi tiết theo path./merge: merge hai cấu trúc JSON (LEFT_JSON+RIGHT_JSON) thànhMERGED_RESULT./query: chạy JSONPath query trên input JSON./pipeline: chạy chuỗi transform steps (query,set,remove,pick,mask,convert) trên JSON./privacy: mask dữ liệu nhạy cảm theokeysvà/hoặcjsonPathPatterns./tree: khám phá cây JSON (expand/collapse) và inspect path/node theo JSON Pointer hoặc JSONPath./convert: convert từ JSON sangYAML,XML,Properties,TypeScript DTO, hoặcJava DTO(input bắt buộc là JSON hợp lệ)./schema-generate: tạo JSON Schema từ sample JSON./schema-mock: sinh mock data từ JSON Schema (hỗ trợtype,enum,const,format,oneOf/anyOf/allOf,$reflocal,min/max)./schema-validate: validate JSON data theo JSON Schema (chọn draft + custom keywords)./csv: chuyển đổi JSON <-> CSV (delimiter/header/quote/escape options)./escape: escape/unescape JSON string./patch: generate/apply JSON Patch operations.
Lưu ý route cũ /yaml vẫn được nhận để tương thích link cũ, sau đó tự canonical redirect về /convert.
- Type hints hiển thị trực tiếp bên trong editor (Monaco content widget) cho cả object/array/scalar, kèm path và thông tin số lượng (
items,keys), có toggleType Hints. - Workspace History có thể bật/tắt theo mode, hỗ trợ
Undo/Redo/Save Snapshotvà restore snapshot theo dropdown. - Diff report có summary (
+/-/~) và danh sách detail theo từng operation/path để phân tích nhanh case thiếu item hoặc đổi kiểu dữ liệu. - Merge report có summary số thay đổi (
ops,+keys,overwrite,+array,type-conflict) để theo dõi kết quả hợp nhất. - Persist state vào
localStorage(json-dev-tool.state.v2): reload vẫn giữ input/output/options/theme,Type Hints, và mode cuối. Sync Inputđồng bộ input giữa các mode editor (trừschema-mockđể giữ schema mẫu riêng).- Hỗ trợ import input từ file qua nút
Opentheo từng mode. - Hỗ trợ share link theo mode hiện tại qua nút
Sharetrên tất cả action bar (link chứa state mode hiện tại trong query?share=..., mở link sẽ tự điều hướng về mode trong payload rồi load dữ liệu tương ứng). - Shortcut chính:
Ctrl/Cmd + Enter(run),Ctrl/Cmd + Shift + F(format),Ctrl/Cmd + Shift + M(minify). - Hỗ trợ download output theo định dạng phù hợp (
.json,.yaml,.xml,.properties,.ts,.java,.csv,.tsv,.txt,patch-result.json). - Offline-first PWA: build tạo service worker + web manifest, cache local các asset chính để app vẫn mở và thao tác được trong điều kiện mạng chập chờn/mất mạng.
- Responsive layout cho mobile/tablet/desktop: mobile dùng mode dropdown, từ
smtrở lên dùng tab navigation cuộn ngang; workspace tự đổi số cột theo kích thước màn hình và action bar tự wrap controls.
src/router/AppRouter.tsx: route entrypoint.src/features/json-tool/JsonToolPage.tsx: page điều phối action bar + workspace theo mode.src/features/json-tool/components/action-bars/: nhóm action bar theo mode.src/features/json-tool/components/workspaces/: nhóm workspace editor theo mode.src/features/json-tool/components/navigation/: top navigation.src/features/json-tool/modeRoutes.ts: map mode <-> route.src/features/json-tool/seo.ts: route-level SEO metadata + structured data updater.src/features/json-tool/useJsonToolState.ts: state trung tâm + xử lý mode + localStorage persistence.src/features/json-tool/utils.ts: helper cho schema/csv/escape/patch.public/robots.txt,public/sitemap.xml,public/llms.txt: static SEO/AI crawler hints.