Render JSON arrays as a browsable spreadsheet-style table
Most JSON data is ultimately tabular — arrays of objects where each object shares the same keys. But staring at brackets and braces makes it hard to spot patterns or missing values. This tool parses your JSON, detects all unique keys across every object in the array to build a column set, then renders the data as an HTML table with row numbers, horizontal scrolling, and CSV export. Single objects are displayed as one-row tables. Primitive arrays get a "value" column. The column detection pass uses a Set to collect keys from every element, so heterogeneous arrays (where objects have different shapes) still show all fields with blanks where a key is absent.
How to use
- 1Paste a JSON array of objects into the left editor.
- 2Click Convert. The right panel renders a scrollable table.
- 3Review the row count and column count shown above the table.
- 4Click Export CSV to download the table as a comma-separated file.
Under the hood
- Automatic column detection — Iterates every object in the array and collects all unique keys into a
Set. Columns appear in insertion order, matching the first object's key order with additional keys appended. - Heterogeneous array support — Objects don't need identical keys. Missing fields render as empty cells rather than causing errors.
- Nested value serialization — If a cell value is an object or array, it's serialized to a compact JSON string so nothing is lost in the table view.
- CSV export via format-adapter — The export path converts the parsed JSON back through the
jsonToContent("csv")pipeline, producing a properly escaped CSV file with a Blob download. - Single object handling — Non-array objects are wrapped into a single-element array and displayed as a one-row table with each key as a column.
Real-world scenarios
- API response exploration — Paste a paginated API response and instantly see all records as rows — much faster than scrolling through nested JSON.
- Quick data validation — Spot
nullvalues, missing fields, and type inconsistencies at a glance in the table layout. - CSV generation for spreadsheets — Convert JSON data to CSV and open it in Excel or Google Sheets without writing a script.
- Database fixture review — View seed data or test fixtures in tabular form to verify completeness before importing.
JSON to table mapping
// Input JSON:
[
{ "id": 1, "name": "Alice", "city": "New York" },
{ "id": 2, "name": "Bob", "city": "London" },
{ "id": 3, "name": "Carol", "city": "Tokyo" }
]
// Rendered as:
// +----+-------+----------+
// | id | name | city |
// +----+-------+----------+
// | 1 | Alice | New York |
// | 2 | Bob | London |
// | 3 | Carol | Tokyo |
// +----+-------+----------+Questions
What if my JSON is not an array?
Single objects are displayed as a one-row table. Primitive values get a single "value" column. The tool adapts to whatever structure you provide.
Can I edit cells in the table?
The current version renders a read-only table optimized for quick inspection. For inline editing, use the full editor's Grid View.
How are nested objects shown in cells?
Nested objects and arrays are serialized to their JSON string representation (e.g., {"a":1}) and displayed as monospace text in the cell. They're not recursively expanded.
Is the CSV export properly escaped?
Yes. Values containing commas, double quotes, or newlines are wrapped in double quotes with inner quotes escaped per RFC 4180.