How to Convert JSON to HTML — Table, Tree & Code Display

"Convert JSON to HTML" can mean different things depending on your goal: displaying data as a table, embedding formatted JSON as a code block, or rendering a tree view. Here are the best free methods for each use case.

Method 1: JSON → HTML Table (Most Common)

If your JSON is an array of objects (like API response data), converting it to an HTML table is the most useful output.

1. Convert the JSON to CSV first using the JSON to CSV tool.
2. Copy the CSV output.
3. Open the CSV to HTML Table converter.
4. Paste the CSV data and click Convert.
5. Copy the generated HTML table code — it includes <thead> with headers and <tbody> rows.
6. Paste into your HTML file.

Method 2: JSON as a Formatted Code Block in HTML

To display JSON as readable code on a webpage (for documentation or debugging):

<pre><code id="json-display"></code></pre>

<script>
  const data = {"name": "Alice", "age": 30};
  document.getElementById('json-display').textContent =
    JSON.stringify(data, null, 2);
</script>

JSON.stringify(data, null, 2) formats the JSON with 2-space indentation. The <pre> tag preserves whitespace. Add a CSS class for syntax highlighting using Prism.js.

Method 3: JSON as an HTML Table with JavaScript

If you are building a webpage dynamically:

function jsonToTable(data) {
  if (!data.length) return '<p>No data</p>';
  const headers = Object.keys(data[0]);
  const headerRow = headers.map(h => `<th>${h}</th>`).join('');
  const rows = data.map(row =>
    '<tr>' + headers.map(h => `<td>${row[h] ?? ''}</td>`).join('') + '</tr>'
  ).join('');
  return `<table><thead><tr>${headerRow}</tr></thead><tbody>${rows}</tbody></table>`;
}

Call it with: document.body.innerHTML = jsonToTable(yourJsonArray);

Method 4: JSON Tree View in HTML

For nested/hierarchical JSON, a collapsible tree view is more readable than a table. Use a lightweight library:

• json-viewer (<json-viewer> web component) — add via CDN, pass JSON as a property.
• JSONEditor — open-source library with tree, code, and table views.
• react-json-view — if you are using React.

Which Method to Use?

• Tabular JSON (array of objects): → HTML table (Method 1 or 3)
• Display JSON code on a page: → <pre><code> block (Method 2)
• Nested/complex JSON: → tree view library (Method 4)