JSON to HTML Converter
Paste JSON and choose a display mode — table, nested list, or cards — to get ready-to-use HTML with a live preview and optional inline styles.
Last updated: May 27, 2026
Find this tool useful? Support the project to keep it free!
Buy me a coffeeWhat is JSON to HTML Converter?
Embedding JSON data in a web page usually means rendering it as a table, a list, or a set of cards. Doing it by hand is straightforward but tedious. This tool renders any JSON value into one of three HTML layouts and gives you the source code to copy.
Table mode is the most useful: when the input is an array of objects, the tool detects every distinct key across the array and produces a column for each, with one row per item. Missing keys produce empty cells. For non-uniform structures, the table degrades into a two-column key/value layout. Nested list mode produces a fully recursive `<ul>` representation, and cards mode renders one styled card per array item.
How to Use JSON to HTML Converter
Paste JSON into the input panel.
Pick a display mode: Table, Nested list, or Cards.
Optionally set a CSS class for the outer table.
Toggle inline styles if you want the preview to look styled without a stylesheet.
Copy the generated HTML.
Common Use Cases
- Embedding API response data into a static HTML page.
- Generating HTML tables for a quick admin or debug page.
- Producing card layouts from a list of objects.
- Visualizing nested JSON as a readable bullet list in documentation.
Example Input and Output
An array of objects becomes an HTML table with one column per key.
[
{ "id": 1, "name": "Alice" },
{ "id": 2, "name": "Bob" }
]<table><thead><tr><th>id</th><th>name</th></tr></thead><tbody><tr><td>1</td><td>Alice</td></tr><tr><td>2</td><td>Bob</td></tr></tbody></table>Privacy
All conversion happens in your browser. No JSON is sent to a server.
Styling
The optional <style> block uses a neutral palette. For production use, remove the style block and target your custom class through your application stylesheet.