About the JSON to HTML
This converter renders the shape of your data rather than flattening it. Objects and arrays become nested markup, so a value three levels down still sits three levels down in the output, and array positions appear as index labels. That makes it a good fit for documents with mixed depth, which a flat spreadsheet style export cannot represent.
Three markup styles are available. Nested tables give a boxed layout that reads well for configuration and for records with many short fields. Nested lists produce the lightest markup and are the easiest to restyle with your own CSS. Definition lists pair each key with its value using dt and dd, which is the semantically correct choice when the data is a set of term and description pairs.
Leave "Complete HTML page" ticked and you get a self contained file with a doctype, a viewport meta tag and a small stylesheet, ready to save and open in a browser or to attach to an email. Untick it to get just the fragment, which is what you want when the markup is going inside an existing template. Every key and value is HTML escaped, so a value containing angle brackets is displayed rather than executed.
If your data is a flat array of records and you only need one table, JSON to HTML Table produces a tighter result, and JSON to CSV is better when the destination is a spreadsheet.
How to use
- Paste JSON on the left. Arrays of records and deeply nested objects both work.
- Pick a Markup style: nested tables, nested lists or definition lists.
- Set a Page title and leave Complete HTML page ticked if you want a file you can open directly.
- Download
data.html, or untick the page switch and copy the fragment into your template.
Common questions
- Will the markup keep my nesting?
- Yes. Every object and array becomes a nested block, so the output mirrors the structure of the input instead of flattening it into one row.
- Is the generated page safe to open?
- Yes. All keys and values are HTML escaped, so text that contains tags is shown as text and no script from your data can run.
- How do I restyle the result?
- Untick "Complete HTML page" to get the fragment, then target the classes on the value spans, such as str, number, boolean and null, from your own stylesheet.
- Which style should I use for an array of records?
- Nested tables read best, but if every record has the same keys the dedicated JSON to HTML Table tool gives a single compact table instead.