Import Data

JSON Paste JSON data
JSON Schema Paste Schema definition
📂 Drop .json file here
Select type
About JSON Formatter — jsonview.dev

JSON Formatter & Visual Editor — What is jsonview.dev?

jsonview.dev is a free online JSON formatter, beautifier, and full visual editor. Paste any raw or minified JSON to instantly format, validate, and pretty-print it — then edit every field directly in an interactive tree view, including real array items. No installation, no account required. Runs 100% in your browser.

Key Features

  • JSON formatter & pretty-printer — instantly format and indent any raw or minified JSON
  • JSON beautifier — syntax-highlighted output with collapsible nodes
  • JSON validator — syntax errors are caught and reported immediately on paste
  • Real array editing — view, add, delete, duplicate, and reorder every array element individually
  • Visual tree editor — add, rename, delete, and reorder fields with drag-and-drop
  • Undo / Redo — step back or forward through structural changes with Ctrl+Z / Ctrl+Shift+Z
  • Expand / Collapse all — open or fold the entire tree with one click
  • Type switcher — toggle any field between string, number, boolean, null, object, and array
  • Import JSON — paste or drag-and-drop a .json file; parses into an editable tree instantly
  • Import JSON Schema — scaffold a JSON structure from a draft-07 schema definition
  • Export JSON Schema — generate a draft-07 schema (with required, integer detection, examples) from your current tree
  • Random value generator — populate fields with semantically appropriate sample data
  • Field search — filter nodes by key name or value (Ctrl+F / ⌘F); toggle value search inline
  • Node counter — live node count and character count shown in the status bar
  • Compact & pretty modes — toggle between minified and indented output
  • One-click copy — copy the full JSON to clipboard instantly
  • Large JSON protection — trees over 800 nodes auto-collapse to keep the UI responsive
  • Runs 100% in-browser — your data never leaves your machine

How to Use

  1. Paste raw or minified JSON into the editor — it will be formatted instantly. Or drag-and-drop a .json file into the Import dialog.
  2. Click + Field to build a new JSON structure from scratch. Press Enter to add the next field quickly.
  3. Click the type badge (e.g. str, num, arr) next to any field to change its type.
  4. For arrays, use ↳ to append a new element, or press Enter inside an array item.
  5. Use ↳ to add a child field inside an object, or + to add a sibling at the same level.
  6. Drag the ⠿ handle to reorder fields or array items within the same level.
  7. Use ↩ Undo / ↪ Redo (or Ctrl+Z / Ctrl+Shift+Z) to step through structural changes.
  8. Click Expand / Collapse to expand or collapse the entire tree at once.
  9. Press Ctrl+F / ⌘F to search fields. Enable +values to also match field values.
  10. Click ↑ Schema to copy a JSON Schema draft-07 of your current tree.
  11. Click Copy to copy the formatted JSON output to your clipboard.

Keyboard Shortcuts

  • Enter — add next field / array item
  • Tab / Shift+Tab — move between key and value inputs
  • Backspace on empty key — delete the field
  • Ctrl+Z / ⌘Z — undo last structural change
  • Ctrl+Shift+Z / ⌘Shift+Z — redo
  • Ctrl+F / ⌘F — focus search

FAQ

Is this JSON formatter free?

Yes. jsonview.dev is completely free with no usage limits, no account, and no install.

Does my JSON get sent to a server?

No. Everything runs entirely in your browser. Your JSON is never transmitted or stored anywhere.

Can I edit real array data, not just a schema?

Yes. Each array element is shown individually with its index label [0], [1]… You can add, delete, duplicate, reorder, and change the type of each element independently.

What JSON Schema versions are supported?

Import supports JSON Schema draft-04/07 (subset). Export targets draft-07 and includes $schema, required arrays, integer detection, and examples. $ref is not supported on import — dereference first.

Does Undo work for value edits?

Undo and Redo track structural changes only: adding, deleting, moving, duplicating nodes, changing types, importing, and clearing. Editing a key name or value directly in an input is not tracked — you can always retype it.

What browsers are supported?

Any modern browser: Chrome, Firefox, Safari, Edge. JavaScript must be enabled.

JSON 格式化与可视化编辑器 — jsonview.dev

jsonview.dev 是一款免费的在线 JSON 格式化、美化与完整可视化编辑工具。 粘贴任意原始 JSON 即可一键格式化、校验和美化，并在交互式树形界面中编辑每个字段，包括数组的真实元素。 无需安装，无需注册，完全在浏览器本地运行。

核心功能

  • JSON 格式化 / 美化 — 一键将压缩 JSON 格式化为缩进可读格式
  • 语法高亮 — 带折叠节点的彩色输出，结构一目了然
  • JSON 校验 — 粘贴即时检测语法错误并提示
  • 真实数组编辑 — 逐个展示 [0][1]… 元素，支持增删改、复制和拖拽排序
  • 可视化树形编辑 — 拖拽排序，支持增删改字段
  • 撤销 / 重做 — 支持 Ctrl+Z / Ctrl+Shift+Z 逐步撤销或恢复结构变更
  • 展开 / 折叠全部 — 一键展开或折叠整棵树
  • 类型切换器 — 一键切换 string、number、boolean、null、object、array
  • 导入 JSON — 粘贴或拖拽 .json 文件，自动解析为可编辑树
  • 导入 JSON Schema — 根据 draft-07 Schema 定义快速生成 JSON 结构
  • 导出 JSON Schema — 一键生成含 required、integer 识别、examples 的 draft-07 Schema
  • 随机值生成 — 为所有字段自动填充语义合理的示例数据
  • 字段搜索 — 按字段名或字段值过滤节点（Ctrl+F / ⌘F）；可内联开启值搜索
  • 节点计数 — 状态栏实时显示节点总数和字符数
  • 紧凑 / 格式化模式 — 在压缩输出和缩进输出之间切换
  • 一键复制 — 将完整 JSON 复制到剪贴板
  • 大 JSON 防护 — 超过 800 个节点时自动折叠，保持界面流畅
  • 纯本地运行 — 数据不会离开你的浏览器

使用方法

  1. 将任意原始或压缩的 JSON 粘贴到编辑区，立即自动格式化。也可在导入弹窗中拖入 .json 文件。
  2. 点击 + Field 从零开始构建 JSON 结构，按 Enter 快速添加下一个字段。
  3. 点击字段旁的类型标签（如 str、arr）切换数据类型。
  4. 对于数组，使用 ↳ 追加新元素，或在数组元素中按 Enter。
  5. 使用 ↳ 在对象内添加子字段，使用 + 添加同级兄弟字段。
  6. 拖动 ⠿ 手柄对字段或数组元素进行排序。
  7. 使用 ↩ Undo / ↪ Redo（或 Ctrl+Z / Ctrl+Shift+Z）逐步撤销 / 恢复。
  8. 点击 Expand / Collapse 一键展开或折叠整棵树。
  9. 按 Ctrl+F / ⌘F 搜索字段，开启 +values 可同时搜索字段值。
  10. 点击 ↑ Schema 将当前树结构导出为 JSON Schema draft-07。
  11. 点击 Copy 将格式化 JSON 复制到剪贴板。

键盘快捷键

  • Enter — 添加下一个字段 / 数组元素
  • Tab / Shift+Tab — 在 key 和 value 输入框之间切换
  • Backspace（key 为空时）— 删除该字段
  • Ctrl+Z / ⌘Z — 撤销上一次结构变更
  • Ctrl+Shift+Z / ⌘Shift+Z — 重做
  • Ctrl+F / ⌘F — 聚焦搜索框

常见问题

这个 JSON 格式化工具是免费的吗？

是的，jsonview.dev 完全免费，无使用次数限制，不需要注册账号，也不需要安装任何软件。

我的 JSON 数据会上传到服务器吗？

不会。所有操作完全在浏览器本地运行，你的 JSON 数据不会发送到任何服务器。

可以编辑数组的真实数据吗？

可以。每个数组元素都会以 [0][1]… 的形式单独展示，支持增删、复制、拖拽排序和独立切换类型，不再只是 Schema 描述。

支持哪些 JSON Schema 版本？

导入支持 JSON Schema draft-04/07 子集；导出目标为 draft-07，包含 $schema、required 数组、integer 识别和 examples。不支持 $ref，请在导入前展开。

撤销 / 重做支持修改字段值吗？

不支持。撤销和重做只跟踪结构性变更：增删节点、移动、复制、切换类型、导入和清空。直接在输入框里修改 key 名或 value 不会入历史栈，可手动改回。

支持哪些浏览器？

支持所有现代浏览器：Chrome、Firefox、Safari、Edge，需要开启 JavaScript。