JSON to HTML Table Converter

From a JSON array to a real HTML table

JSON is the universal format for moving structured data between programs, but it is not built for human eyes. A list of objects like [{"name":"Alice","age":30},{"name":"Bob","age":25}] is trivial for a browser to parse and miserable for a person to scan. A table flips that around: each object becomes a row, each property becomes a column, and the relationships you cared about line up visually. This converter does exactly that transformation in your browser — it parses the array, collects every key that appears across all objects, and emits a clean <table> with inline styles so the output works when pasted into an email, a CMS, or a static HTML file with no external stylesheet attached.

How the columns are chosen

The tool does not assume every object has the same shape. It walks the whole array and builds the column list in first-seen order: the first object contributes its keys, and any later object that introduces a new key appends it to the right. If an object is missing a key that other rows have, that cell is rendered empty rather than dropped — so ragged data still produces a rectangular, valid table. This is the behaviour you want when you export records from an API where some fields are optional.

A worked example with nested data

Suppose you paste this:

[{"name":"Alice","role":"Engineer","address":{"city":"NYC","zip":"10001"}}, {"name":"Bob","role":"Designer","address":{"city":"LA","zip":"90001"}}]

With Flatten (dot notation) selected, the nested address object is unpacked into two new columns, address.city and address.zip, so the table has four columns: name, role, address.city, address.zip. The flattening is recursive, so a deeply nested object such as meta.author.email becomes a single dotted column header. If you instead choose Show as JSON string, the whole address object is kept in one cell as the compact text {"city":"NYC","zip":"10001"} — useful when the nested structure is the data you want to preserve, not split apart.

What the options actually change

Because every style is inline, the copied HTML is self-contained. That is the key difference from most table builders, whose output depends on a CSS class you also have to copy. Paste this table into a newsletter tool or a Markdown file that allows raw HTML and it renders the same way it looked in the preview.

Transpose and CSV export

The Transpose button swaps the axes: each original column becomes a row labelled with the field name, and each original record becomes a column labelled Row 1, Row 2, and so on. This is the right view when you have many fields and only a handful of records — a single product compared against its specification sheet, for instance — because a tall, narrow layout reads better than a short, very wide one. The Download CSV button produces a spreadsheet-ready file using the same column structure, quoting every value and doubling any internal quotation marks so commas and quotes inside your data never break the file.

Common mistakes and practical tips

• Top-level object instead of an array. The input must be an array. A single {"name":"Alice"} will be rejected — wrap it in brackets: [{"name":"Alice"}].
• Trailing commas. JSON is stricter than JavaScript. A comma after the last element or property is a syntax error; the tool will report exactly where parsing failed.
• Arrays inside objects. A property whose value is an array (not a plain object) is not flattened — it is stringified into the cell. If you need each array element broken out, restructure the data first.
• Very large datasets. The whole table is rendered for preview, so thousands of rows can feel sluggish. Convert in batches if you only need a sample, or rely on the CSV export for bulk data.
• Pasting from a code file. Strip JavaScript wrappers like const data = and the trailing semicolon; the box expects pure JSON, not an assignment statement.

Everything runs locally in your browser. The JSON you paste is parsed and rendered on your device and is never uploaded, which makes the tool safe to use on data you would not want to send to a third-party server.