JSON to HTML

Convert JSON into an HTML table.

JSON to HTML Table Converter

The JSON to HTML converter turns JSON data into an HTML table you can paste into a web page, a CMS, an email, or documentation. You get the raw HTML on the right and a rendered preview below, updated as you type.

How JSON maps to a table

  • Array of objects – the classic case: each object is a row and each key a column. Keys missing from some objects leave empty cells.
  • Single object – rendered as a two-column table of keys and values.
  • Array of values – an index column plus the values.
  • Nested data – with Nested tables on, objects and arrays inside a cell become their own small tables, so no information is lost. Turn it off to show nested data as compact JSON text instead.

Clean, safe markup

The output uses semantic <table>, <thead>, <tbody>, <th>, and <td> elements and nothing else. All content is HTML-escaped, which makes it safe to embed even when the data comes from users. Optional border/cellpadding attributes make the table readable without any CSS; switch them off when you style the table yourself. Indent HTML makes the markup easy to read or edit; turn it off for the most compact output.

Use cases

  • Showing API results or exports to non-technical colleagues.
  • Adding data tables to blog posts, wikis, or help center articles.
  • Building HTML email reports from JSON data.
  • Quickly eyeballing the content of a JSON array in table form.

For spreadsheets, export with JSON to CSV or JSON to Excel. To show JSON as colored code instead of a table, use the JSON Syntax Highlighter.

Frequently Asked Questions

An array of objects becomes a table with one column per key and one row per object. A single object becomes a two-column key/value table, and arrays of simple values become an indexed list. Nested objects and arrays are rendered as tables inside cells.

The columns are the union of all keys, in order of first appearance. Cells for keys an object doesn't have are left empty.

Yes. All keys and values are HTML-escaped, so text like <script> is shown literally. The output contains only table markup — no scripts or external resources.

The markup is plain <table>, <thead>, <tbody>, <th>, and <td>, so any CSS framework or your own stylesheet applies. Turn off Borders to drop the border/cellpadding attributes and style it entirely with CSS.