JSON Preview
Preview JSON as beautified text, a table, a relationship diagram, or a tree — switch views instantly.
Entrée JSON
JSON embelli
Saisissez du JSON à gauche pour en voir l'aperçu.
Qu'est-ce que 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, or an expandable tree for jumping straight to a deeply nested key. 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.
Comment utiliser 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), or Tree (an expandable, searchable outline).
- Keep editing on the left — every view updates live, so you can jump between representations while you work instead of committing to one.
Exemples
Beautify view
Entrée
{"id":1,"name":"Ada Lovelace","roles":["admin","editor"]}
Sortie
{ "id": 1, "name": "Ada Lovelace", "roles": [ "admin", "editor" ] }
Table view (same input)
Entrée
[{"id":1,"name":"Ada"},{"id":2,"name":"Grace"}]
Sortie
A two-row, two-column table (id, name) — sortable, filterable, exportable to CSV.
Erreurs courantes
- 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 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.
Pourquoi utiliser cet outil
- One input, four views — no re-pasting JSON into separate formatter, table, and tree 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.