JSON to Table Viewer

No. Your JSON is never sent to our servers - all parsing, sorting, filtering, and CSV/JSON exporting happens directly in your browser on your device using JavaScript. The only network request the tool ever makes is the one you trigger explicitly with URL Import.

The input must be a non-empty JSON array whose first item is an object, for example [{"name":"Alice","age":30},{"name":"Bob","age":25}]. A bare object like {"a":1} or a primitive array like [1,2,3] is rejected with a clear error message because there is no row/column structure to render.

Yes. Columns are derived from the union of all keys across every item in the array, so mixed-shape arrays render correctly. Items that are missing a particular key show an empty cell in that column instead of breaking the table.

Yes. Click any column header to toggle ascending/descending sort - numbers are compared numerically and strings are compared with locale-aware ordering. The search box filters rows by substring match across all columns simultaneously, and sort is reapplied to the filtered set in real time.

The parser accepts arrays of any size that your browser can hold in memory, but only the first 500 rows of the filtered/sorted result are rendered to keep scrolling smooth. A footer message shows "Showing first 500 of N rows" when the filtered set is larger - narrow it down with the search box to inspect specific rows beyond 500.

Yes. Copy CSV, Download CSV, and Download JSON all export the currently filtered and sorted rows, not the original input. This makes it easy to extract a subset - filter the rows you want, then export.

URL Import calls fetch() directly from your browser to the URL you enter and loads the response text into the input area. There is no proxy or intermediary server, so the target URL must allow cross-origin requests via CORS headers - APIs and JSON files that block CORS will return a network error.

No. Once you click Render Table, your input JSON, parsed rows, and detected columns are saved to your browser's localStorage and restored automatically on the next visit. Click Clear to wipe the input, the table, and the persisted data immediately.

Click Render Table to convert a JSON array of objects into a spreadsheet-style grid. Each object becomes a row, each unique key becomes a column header, and the table renders inside a scrollable container with a sticky header so column names stay visible while scrolling.

Click any column header to sort by that column. Click the same header again to flip the direction - an arrow icon next to the column name shows the active direction. Numeric columns are sorted numerically (1, 2, 10 - not 1, 10, 2) and string columns use locale-aware comparison via String.localeCompare.

Type in the "Search / filter rows..." box to instantly filter rows. The filter is case-insensitive and matches a substring against the stringified value of every cell in every column - if any cell in a row contains the query, the row stays visible. The row counter updates live as you type.

Columns are derived from the union of all keys across every item in the array, so arrays of mixed-shape objects render correctly. Items missing a particular key show an empty cell instead of breaking the layout.

A # column on the left numbers each visible row starting from 1. The header row is sticky to the top of the scroll container, so column names and the row numbers stay anchored while you scroll through long tables.

Cells whose underlying value is a JavaScript number are automatically right-aligned and rendered with tabular-nums font-variant, so digits line up vertically and numeric columns are easy to scan and compare - just like a spreadsheet.

When a cell value is a nested object or array, it is rendered as a compact JSON.stringify string inside the cell. This keeps every field of your data visible at a glance instead of being silently dropped.

Paste JSON straight into the Input textarea, click Upload to pick a file (the picker accepts .json, .jsonl, and .txt extensions), or drag a file directly onto the input area. Files are read locally with FileReader.readAsText() - nothing is uploaded.

Click URL Import to reveal a URL field, enter an HTTP(S) URL, then click Fetch (or press Enter) to call fetch() directly from your browser to that URL. The response text is loaded into the Input textarea so you can review it before clicking Render Table. Because there is no proxy, the target must allow cross-origin requests via CORS headers.

Click Copy CSV to copy the visible rows to your clipboard as CSV. Values containing commas, double quotes, or newlines are wrapped in double quotes and inner quotes are escaped by doubling, matching the RFC 4180 dialect that Excel and Google Sheets expect. The button briefly shows "Copied!" as confirmation.

Click Download CSV to save the visible rows as table-data.csv. The same RFC 4180 quoting applied to Copy CSV is used here, so the file imports cleanly into spreadsheets and most data tools without further escaping.

Click Download JSON to save the visible rows as table-data.json, pretty-printed with two-space indentation. This is the easiest way to extract a subset of a larger dataset - filter the rows you want, sort them, then download.

Copy CSV, Download CSV, and Download JSON all operate on the currently filtered and sorted rows, not the original input. Narrow down with the search box first to extract just the slice you need.

Only the first 500 rows of the filtered/sorted result are drawn into the DOM, so the page stays responsive even on huge arrays. A footer shows "Showing first 500 of N rows" when there are more matches - filter further to drill into rows beyond 500. Exports always include the full filtered set, not just the visible 500.

Once you click Render Table, your input JSON, parsed rows, and detected columns are saved to your browser's localStorage under the key "json-to-table-viewer" and restored automatically on the next visit. The save only fires after a successful render, so a partially typed input does not overwrite your previous table.

Click Clear to wipe the input textarea, the rendered table, the search filter, the active sort, the URL Import bar, the error message, and the persisted localStorage entry in a single action - useful when switching between unrelated datasets.