Getting Started
▶ FormatPaste or type JSON into the editor, then click Format (or press Ctrl+Enter) to parse it and open the interactive tree view.
✏️ EditReturn to the editor at any time to modify the source JSON. Your previous input is preserved.
Tip: The formatter auto-detects syntax errors and shows the exact position of the problem so you can fix it quickly.
View Tabs
🌲 TreeInteractive folding tree with full syntax highlighting. Click any object {} or array [] header row to expand or collapse it. All editing features (sort, nulls, search) work in this view.
{ } RawThe fully formatted JSON as plain text with syntax colouring — useful for a quick read or to copy a section manually.
Tree Controls
⿻ DepthCollapse the entire tree to a fixed depth (1–4 levels). Depth 1 shows only the root keys — great for getting a quick overview of a large document before diving in.
⊟ Collapse
⊞ ExpandToggle button that collapses every node in the tree at once, then expands them all back. The label flips to show what the next click will do.
⌖ PathShow or hide the JSON path label (e.g. $.cart.items[0].price) on the right side of each row. Useful for understanding nested structure at a glance.
Search
🔍 SearchClick the search box or press Ctrl+F and start typing to highlight every matching key or value across the tree. Collapsed nodes are automatically expanded to reveal matches.
Results panelA panel opens on the right listing every match with its path. Click any result to jump directly to that node in the tree. Use Enter / Shift+Enter inside the search box to step forward or backward through matches.
✕ ClearClick the ✕ inside the search box or press Escape to clear the search and dismiss the results panel.
Table View
table buttonHover any array or object row to reveal the table button in the row actions. Click it to open that node's data as a column grid on the right side panel.
Row selectClick any row in the table to highlight it and automatically scroll the tree to that node, expanding any collapsed ancestors along the way.
▸ Drill-downCells showing ▸ {N keys} or ▸ [N items] are clickable — click them to open that nested object or array as a new table without losing your place.
← backAfter drilling into a nested table, a ← back button appears in the panel header to return to the previous level.
Best used with arrays of objects — e.g. a list of users or products. The table automatically detects all unique keys across every item and renders them as columns.
⇅ Sort
⇅ SortClicking the main button sorts all object keys alphabetically A→Z throughout the entire document and rebuilds the tree.
▾ DropdownExpand the dropdown for more options: sort keys Z→A, sort array items ascending or descending, or sort both keys and arrays together in one pass.
Click a keyInside an array of objects, each key name underlines on hover. Clicking it sorts that array by that key (ascending). Clicking the same key again reverses to descending.
Copy & Export
⎘ CopyCopy the formatted (indented) JSON to the clipboard — ready to paste into a file or editor.
⚡ MiniCopy a minified (single-line) version of the JSON — useful for APIs or configs that require compact JSON.
⬇ SaveDownload the formatted JSON as a formatted.json file directly to your computer.
Null Controls
∅ NullsTemporarily hide all rows whose value is null. The data is unchanged — clicking the button again brings them back.
✂ StripPermanently delete every null value from the document and rebuild the tree. This is destructive — it also updates the Copy, Minify, and Download output.
Keyboard Shortcuts
Ctrl + EnterFormat / parse the JSON in the editor
Ctrl + FFocus the search box
EnterJump to next search match (while search is focused)
Shift + EnterJump to previous search match
EscapeClear search / close panels / close this help