Htmlify.dev

Convert JSON to an HTML Table

Paste a JSON array of objects and get a semantic HTML table: a proper <thead>, th scope="col" headers and escaped cell values. Nested objects are flattened, missing keys become empty cells. Everything runs in your browser.

Supported JSON shapes

Array of objects

[{ "id": 1, "name": "A" }, { "id": 2, "name": "B" }]

Keys become columns, each object a row. Keys are collected across all objects.

Array of arrays

[["id", "name"], [1, "A"], [2, "B"]]

The first array is the header row. Switch off “First row is a header” if it is data.

Wrapped array (API responses)

{ "data": [ … ], "page": 1 }

Arrays under data, rows, items, results or records are unwrapped automatically.

Single object

{ "name": "A", "meta": { "views": 10 } }

Rendered as a two-column Key / Value table, nested keys shown as meta.views.

What the generated table looks like

<table class="htmlify-table">
  <thead>
    <tr>
      <th scope="col">name</th>
      <th scope="col">location.city</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ada Lovelace</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Cell text is HTML-escaped, so a value like <script> in your data is shown literally instead of being executed. Pick Bare HTML to drop the class attribute and CSS block entirely.

Frequently asked questions

What JSON shapes can be turned into a table?
An array of objects (each object becomes a row and the union of keys becomes the columns), an array of arrays (the first array is the header), an object that wraps the array under data, rows, items, results or records, and a single object, which is rendered as a two-column key/value table.
How are nested objects handled?
Nested objects are flattened with dot notation, so {"address":{"city":"Lyon"}} becomes a column called address.city. Nested arrays are kept as their JSON text inside the cell.
What if objects have different keys?
Columns are the union of every key seen, in order of first appearance. Rows that lack a key get an empty cell.
Does the output include CSS?
Only if you pick a style preset. The Minimal, Striped and Bordered presets prepend a small <style> block scoped to the table class. Choose Bare HTML to get just the table element with no class and no CSS.
Is the JSON uploaded to a server?
No. Parsing and table generation run in your browser. Nothing is stored or transmitted.

More free HTML converters