DevToolPal
EN

JSON to HTML Table Converter

Turn a JSON array of objects into an HTML table, flattening nested fields into dotted columns.

Runs locally, never uploaded

Options

Input

0 chars · 0 B

Output

0 chars · 0 B

What it does

This tool converts JSON data, typically an API response or an export, into an HTML table. Each object becomes a row and each key becomes a column. Nested objects are flattened into dotted column names so the table stays two-dimensional.

How to use

  1. Paste JSON into the Input box, upload a .json file, or click Sample.
  2. The table markup appears on the right as you type. Invalid JSON is reported with its position.
  3. Turn Include header row off if you only want the data rows.
  4. Copy the HTML or download it as an .html file.

Example

[
  { "name": "Alice", "address": { "city": "Shanghai" }, "tags": ["admin", "editor"] },
  { "name": "Bob", "address": { "city": "Beijing" } }
]

gives a table with the columns name, address.city and tags. Alice’s tags cell reads admin; editor and Bob’s is empty.

Tips

  • To show an API response, paste the whole response. If it looks like {"items": [...]}, the rows are taken from items automatically.
  • Use the JSON formatter first if you want to inspect or fix the JSON before converting it.

FAQ

› What JSON structure does it expect?

An array of objects works best, one object per row. An object with a single array property, such as {"data": [...]}, is also understood. Any other value becomes a single row.

› How are nested objects and arrays handled?

Nested fields become dotted column names, such as address.city. Arrays of simple values are joined with "; ", and arrays of objects get index paths such as items.0.name.

› What if objects have different keys?

The columns are the union of all keys in the order they first appear. Missing values are left empty.

› Is the output safe to put on a web page?

Yes. Text is HTML-escaped, so values like <script> are shown as text.