JSON Viewer
A multi-file JSON workspace — read the same document as formatted text, a table, a tree, or a relationship graph.
Empty document
What is JSON Viewer?
A JSON viewer is a workspace for reading JSON rather than editing it — the problem being that raw JSON is written for machines, and a 40KB API response in a text editor is a wall of punctuation. This viewer keeps several representations of the same document side by side: the raw text on one side, and on the other a formatted view, a spreadsheet-style table of records, an expandable tree, or a relationship graph showing how nested arrays link back to their parents. Because different questions need different shapes — "what fields does this have" is a tree question, "which of these 200 records has a null email" is a table question — switching between them beats scrolling. Files you open are kept in a local workspace so you can hold several documents at once and come back to them later, and every one of them stays in your browser.
How to use JSON Viewer
- Click "New" in the Files sidebar to add a document, or paste JSON straight into the editor in the middle column.
- Pick a view on the right — Pretty for formatted text, Table for records as rows, Tree for an expandable outline, Relationship for a graph of how nested arrays connect.
- Use the search box above the file list to find a document once the workspace has more than a handful.
- Download the active file with the download button, or copy it with the copy button. The status bar shows the record count and whether the document currently parses.
Examples
An array of records becomes a table
Input
{"records": [{"id": 1, "name": "John"}, {"id": 2, "name": "Jane"}]}
Output
Table view: 2 rows, columns id and name — sortable, searchable, paginated
Nested arrays become linked tables in the graph
Input
{"orders": [{"id": 1, "items": [{"sku": "A1"}, {"sku": "B2"}]}]}
Output
Relationship view: an orders node linked to an items node holding 2 rows
Common mistakes
- Assuming the workspace is synced — it lives in one browser's storage, so clearing site data or switching devices loses it. Download anything you need to keep.
- Reaching for the Table view on a document that isn't a collection of records; a deeply nested config object has no natural rows, and the Tree view is the better fit for it.
- Editing in the middle column and expecting the original file on disk to change — this is a local copy, and saving means downloading it back out.
Why use this tool
- Four views of the same document, switchable without re-pasting or losing your place.
- A persistent multi-file workspace, so comparing yesterday's API response with today's doesn't mean juggling browser tabs.
- Runs entirely client-side and works offline once installed, so production payloads never leave your machine.