JSON Preview
Preview JSON as beautified text, a table, a relationship diagram, or a tree — switch views instantly.
JSON input
Beautified JSON
Enter JSON on the left to preview it.
What is JSON Preview?
JSON Preview is an all-in-one way to look at a JSON document without deciding up front which view you need. Paste or load any JSON and it opens as beautified, indented text — the same shape you'd get from a formatter — but a switcher above the preview lets you flip the same document into a sortable/searchable table, a relationship diagram showing how nested arrays link back to their parent records, an expandable tree for jumping straight to a deeply nested key, or a generated TypeScript type declaration that merges every array element's shape into one interface, marking a key that's missing from some elements as optional rather than dropping it. Because every view reads the same input, there's no re-pasting or re-uploading to compare representations — you're just looking at one document through a different lens.
How to use JSON Preview
- Paste or type JSON into the input box on the left — or drag a .json file onto it, or load one of the built-in samples from the toolbar rail.
- The right panel opens on "Beautify" by default: your JSON re-indented and syntax-highlighted, with a one-click copy button.
- Use the icon tabs above the preview to switch to Table (flattened rows and columns), Relationship view (linked tables for nested arrays), Tree (an expandable, searchable outline), or Structure (a generated TypeScript type declaration for the whole document).
- Keep editing on the left — every view updates live, so you can jump between representations while you work instead of committing to one.
Examples
Beautify view
Input
{"id":1,"name":"Ada Lovelace","roles":["admin","editor"]}
Output
{ "id": 1, "name": "Ada Lovelace", "roles": [ "admin", "editor" ] }
Table view (same input)
Input
[{"id":1,"name":"Ada"},{"id":2,"name":"Grace"}]
Output
A two-row, two-column table (id, name) — sortable, filterable, exportable to CSV.
Structure view (generated TypeScript type)
Input
[{"id":1,"name":"Ada"},{"id":2,"name":"Grace","admin":true}]
Output
type Root = { id: number name: string admin?: boolean }[]
Common mistakes
- Expecting Table view to show nested one-to-many arrays inline — they become their own linked table instead, visible in Relationship view.
- Assuming a parse error in one view means the JSON is entirely invalid, when it may just be a shape Table/Relationship view can't represent (Tree and Structure view will still show it).
- Not checking Tree view's search box when hunting for a single deeply nested key — it's faster than manually expanding every level.
- Expecting Structure view to reflect your target backend language — it only ever emits a TypeScript type declaration, never Go, Python, or any other language's syntax.
- Reading a `key?:` in Structure view as meaning the field is genuinely optional in every record — it means at least one array element was missing that key, not that its presence is optional by design.
Why use this tool
- One input, five views — no re-pasting JSON into separate formatter, table, tree, and type-generator tools to compare representations.
- Runs entirely client-side, so sensitive API responses or config never leave the browser.
- The relationship view automatically detects nested one-to-many arrays and diagrams how they link back to their parent, which a flat table or plain formatter can't show.
- Switching views is instant and non-destructive — useful for explaining a JSON shape to a teammate without exporting multiple files.
- Structure view gives you a merged TypeScript type for the whole document in one click, without opening a separate json-to-typescript tab.