All Tools

JSON Editor

Explore and edit JSON with a side-by-side tree view and code editor.

Paste JSON in the Text panel (left), then click ▶ to render it as an interactive tree on the right. Or click Load Sample to get started immediately.

Text panel

  • Format — pretty-print with 2-space indent
  • Minify — strip all whitespace
  • Copy / Clear — clipboard copy and full reset

Tree panel

  • Click ▶ next to any object or array to expand or collapse it
  • Click a key to rename it inline — press Enter to save, Esc to cancel
  • Click a value to edit it inline — type raw JSON: "hello", 42, true, null, [], {}
  • Hover a row to reveal action buttons: + add child, +↓ add sibling after, ⧉ duplicate, ✕ delete

Sync arrows

  • ▶ — parse text, render or reload the tree
  • ◀ — stringify the tree back into the text panel
Tip: Press Ctrl+Enter / ⌘+Enter to quickly sync text → tree. Tree edits automatically update the text panel.
Paste JSON or load a sample to get started
Formatter
Text
0 chars
Tree

Paste JSON and click ▶ to render the tree.

—
How the editor works

The two panels stay in sync: paste JSON in the text panel and click ▶ to render the tree. Edit any node in the tree and the text panel updates immediately. The tree color-codes every value by type so you can understand the structure at a glance without reading raw characters.

Value type colors

Strings appear in green with quotes. Numbers in yellow. Booleans (true/false) in red. null in purple. Objects and arrays show a child count in gray.

Inline editing

Click a value to edit it as raw JSON. Type "hello" for a string (quotes required), 42 for a number, true/false/null for those types, {} for an empty object, or [] for an empty array. Press Enter to save, Esc to cancel.

Node actions (hover to reveal)

+ adds a child inside the node. +↓ inserts a sibling after it. ⧉ deep-copies the entire node including all nested children. ✕ deletes the node and all its children. All changes sync to the text panel immediately.

Sync arrows

▶ parses the text and re-renders the tree — use this after pasting or manually editing the text. ◀ stringifies the tree back to formatted text. Tree edits auto-update the text panel; text edits auto-render the tree after 0.8 s.