JSON to HTML Table
Convert a JSON array of objects (or a single object) into a clean, ready-to-paste HTML <table>. Headers are the union of all keys, values are HTML-escaped, nested objects flatten or stringify, and you can add a CSS class or minify the output.
Input
Options
Stringify shows nested objects/arrays as JSON in one cell; Flatten expands nested objects into dot-notation columns (user.city).
Optional. Added as the class attribute on the <table> so you can style it with your own CSS.
On (the default, as in the legacy tool), a JSON null renders as an italic null. Off, it renders as an empty cell — indistinguishable from a missing key.
Output
Your table will appear here.
Guides
Turn JSON into an HTML table
JSON to HTML Table converts a JSON array of objects — or a single JSON object — into a clean, ready-to-paste <table>. Drop in your data, and you get valid HTML markup with a <thead> built from your keys and one <tbody> row per record. It is the fastest way to move structured JSON from an API response, a database dump, or a config file into a web page, email, CMS, or documentation.
Every value is HTML-escaped, so awkward characters like &, <, >, ", and ' show up as text instead of breaking your markup — you can paste untrusted data straight in without worrying about broken or injected tags.
How to use it
- Paste a JSON array of flat objects into the input, for example
[{"name":"Alice","age":30},{"name":"Bob","age":25}]. A single object works too — it becomes a one-row table. - Choose how to handle nested objects: Stringify shows a nested object or array as compact JSON inside one cell, while Flatten expands nested objects into dot-notation columns such as
user.city. - Optionally add a CSS class to the
<table>so you can style it with your own stylesheet, and toggle Minify to collapse the HTML onto a single line. - Copy the generated HTML or download it as an
.htmlfile. A live preview shows exactly what the markup renders as.
How are the table columns decided?
The header row is the union of every key across all objects, in the order each key is first seen. If one object is missing a key that another has, that cell is simply left empty (<td></td>). This means your objects do not all need the same shape — the tool lines everything up into a consistent grid.
What happens to nested objects and arrays?
By default they are stringified into a single cell as JSON (for example ["admin","editor"]). Switch to Flatten and nested objects are expanded into separate dot-notation columns; arrays are still shown as JSON, since exploding array indices into columns rarely produces a readable table.
How are null and missing values shown?
Both a null value and a key that is absent from an object render as an empty cell. Booleans render as true or false, and numbers render as their literal value.
Can I style the table?
Yes. The tool emits a plain semantic <table> with no inline styles, so it inherits your site's CSS. Add a class in the options (for example table table-striped) and target it from your own stylesheet for borders, striping, spacing, or dark mode.
Is my data private?
Yes. This tool runs entirely in your browser — your JSON is never uploaded to a server. The conversion happens locally in JavaScript, so even large or sensitive datasets stay on your machine. You can use it offline once the page has loaded.