How do I convert JSON to an HTML table for free?

Paste your JSON array into the editor at jsonformatters.com/json-to-html, select your preferred CSS framework (Plain HTML, Bootstrap 5, or Tailwind CSS), choose styling options, and click Convert to HTML. The tool generates a complete, copy-paste-ready HTML table instantly. It is 100% free, requires no signup, and processes your data entirely in your browser — nothing is ever uploaded to a server.

Can I generate Bootstrap and Tailwind CSS tables from JSON?

Yes — select Bootstrap 5 or Tailwind CSS from the framework dropdown before converting. Bootstrap output includes table table-striped table-hover classes with a table-dark thead. Tailwind output includes utility classes like w-full border-collapse border-gray-300 with hover states on rows. Both outputs are production-ready and only require the respective CSS framework to be loaded on your page.

How does nested JSON get handled when converting to HTML?

Nested JSON objects are automatically flattened using dot notation. For example, { user: { name: 'Alice', city: 'NYC' } } becomes two table columns: user.name and user.city. Arrays of objects are converted so each object becomes one table row. This handles typical REST API responses, MongoDB document exports, and Firebase JSON exports without any manual data restructuring.

How do I display a JSON API response in HTML?

Two approaches: (1) Use this converter — copy your API response JSON, paste it into the editor, select your preferred output format, and download the HTML table code to embed in your page. (2) Write JavaScript — use fetch() to call the API, response.json() to parse it, then use document.createElement() with textContent to safely render each value as a DOM element. The online converter is faster for one-time conversions.

JSON to HTML Converter — Free Table, List & Code Output

Q: Is this JSON to HTML converter safe to use with sensitive data?

Yes. All conversion runs entirely in your browser — your JSON data is never sent to any server or stored anywhere. The tool also automatically applies XSS-safe HTML entity escaping to all values, converting characters like < and & into < and &. This prevents cross-site scripting vulnerabilities if you embed the generated HTML in your own web application.

Convert JSON to HTML table, unordered list, or formatted code block — with Bootstrap 5 or Tailwind CSS classes applied instantly. Handles nested JSON, escapes HTML entities for XSS safety, and runs 100% in your browser. No upload, no signup.

Table Styling Options

Table Framework

BorderStriped rowsHover effectCompact mode

Code Formatting

100% Secure – All processing happens locally in your browser

More JSON Tools

JSON Compare

Compare two JSON files side-by-side

JSON to CSV

Convert JSON data into CSV format

JSON to XML

Convert JSON into XML format instantly

JSON to YAML

Transform JSON to YAML format

JSON to Excel

Export JSON data to Excel (.xlsx)

JSON to SQL

Convert JSON to SQL INSERT queries

JSON to Text

Extract readable text from JSON

JSON Tree Viewer & Reader

Visualize JSON in expandable tree view

What is JSON to HTML Conversion?

JSON to HTML conversion transforms JSON data into HTML table markup with proper thead, tbody, tr, th, and td tags. This tool supports advanced styling frameworks like Bootstrap and Tailwind CSS, making it easy to generate production-ready table code for your web applications.

HTML Output Formats: Table vs List vs Raw Code

This tool can generate JSON data in multiple HTML output formats. Choose the right format based on how you plan to display the data:

Output Format	HTML Elements Used	Best For	Framework Support
HTML Table	<table> <thead> <tbody> <tr> <td>	Structured data, reports, dashboards, comparisons	Plain HTML, Bootstrap, Tailwind CSS
HTML List	<ul> <li> or <ol> <li>	Simple key-value pairs, navigation menus, feature lists	Plain HTML, Bootstrap list-group
Definition List	<dl> <dt> <dd>	Glossaries, metadata display, API property definitions	Plain HTML only
Formatted Code	<pre> <code>	Displaying raw JSON with syntax highlighting for documentation	Prism.js, highlight.js compatible
Card Grid	<div> with class grid	Product listings, user profiles, visual data cards	Bootstrap cards, Tailwind grid

Where to Use JSON to HTML?

1
Email Templates
Generate formatted data tables for HTML emails and newsletters
2
Admin Dashboards
Display API responses and database data in clean, readable tables
3
Web Portals
Create data grids for customer portals and reporting systems
4
Data Reports
Convert analytics and metrics data into presentable HTML reports
5
CMS Tables
Embed dynamic content tables in WordPress, Drupal, or custom CMS platforms

How to Use This Tool

Paste your JSON array into the editor
Select your preferred table framework (Plain, Bootstrap, or Tailwind)
Choose styling options like borders, striped rows, and hover effects
Click "Convert to HTML" to generate the table code
Preview the live table to see how it looks
Copy the HTML code or download as .html file

Features

Support for Plain HTML, Bootstrap, and Tailwind CSS frameworks
Customizable styling: borders, striped rows, hover effects, compact mode
Prettify or minify HTML output for production use
Live visual preview of generated table
Handles nested JSON objects without data loss
Automatic HTML entity escaping for security
Download as .html file ready for embedding
100% browser-based - no server uploads

⚠️

Are You Looking for JSON-LD? That's Different.

If you searched "add JSON to HTML page" or "JSON in HTML head tag," you may be looking for JSON-LD structured data — not a JSON-to-HTML data converter. Here's the exact difference:

—	JSON to HTML (This Tool)	JSON-LD Structured Data
Purpose	Display JSON data visually in a browser	Tell search engines about your page content
Where it goes	Inside <body> — visible to users	Inside <head> — invisible to users
Who reads it	Website visitors, developers	Google, Bing, search engine crawlers
Output format	<table>, <ul>, <div> HTML elements	<script type="application/ld+json">
Use case example	Show a product list as an HTML table	Add schema.org markup for rich snippets
Does this tool do it?	✅ Yes — that's exactly what we do	❌ No — use Google's Structured Data Markup Helper

Bottom line: If you want to display your JSON data as a readable table or list on a webpage — use the converter above. If you want to add Schema.org markup to help Google understand your page content — use Google's Structured Data Markup Helper instead.

Security: How This Tool Protects Against XSS Attacks

When converting JSON data to HTML, a critical security concern arises: if user-provided values are inserted into the DOM using innerHTML, malicious JSON values like <script>alert('xss')</script> could execute arbitrary JavaScript — a Cross-Site Scripting (XSS) vulnerability.

❌Unsafe Method (innerHTML)

// DANGEROUS — executes malicious scripts
td.innerHTML = jsonValue;
// If jsonValue = "<script>stealCookies()</script>"
// → Script executes in the browser ⚠️

✅Safe Method (textContent)

// SAFE — treats value as plain text
td.textContent = jsonValue;
// If jsonValue = "<script>stealCookies()</script>"
// → Displayed as literal text, not executed ✅

✅ This tool uses textContent exclusively for all JSON value rendering. Every cell value, key name, and nested property is inserted as plain text — meaning malicious JSON values are displayed safely as literal strings, never executed as code. The generated HTML output also uses proper HTML entity escaping (<, &) for safe embedding in any webpage.

Reference: MDN Web Docs: innerHTML Security Considerations · OWASP: Cross-Site Scripting (XSS) Attack Reference

JSON to Bootstrap Table & Tailwind Table Examples

Select the framework in the converter above and you'll get table code with the correct classes already applied. Here's what the output looks like for each framework:

🅱 Bootstrap 5 Outputclass="table table-striped"

<table class="table table-striped 
             table-hover table-bordered">
  <thead class="table-dark">
    <tr>
      <th scope="col">Name</th>
      <th scope="col">Role</th>
      <th scope="col">City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Engineer</td>
      <td>New York</td>
    </tr>
  </tbody>
</table>

Requires: <link rel='stylesheet' href='bootstrap.min.css'>

🌊 Tailwind CSS Outputclass="w-full border-collapse"

<table class="w-full text-sm 
             border-collapse border border-gray-300">
  <thead class="bg-gray-100">
    <tr>
      <th class="border border-gray-300 
                 px-4 py-2 text-left">Name</th>
      <th class="border border-gray-300 
                 px-4 py-2 text-left">Role</th>
    </tr>
  </thead>
  <tbody>
    <tr class="hover:bg-gray-50">
      <td class="border border-gray-300 
                 px-4 py-2">Alice</td>
      <td class="border border-gray-300 
                 px-4 py-2">Engineer</td>
    </tr>
  </tbody>
</table>

Requires: Tailwind CSS v3+ via CDN or npm

💡 Copy-paste ready: The tool generates complete, working HTML with all framework classes pre-applied. Select "Bootstrap" or "Tailwind" from the framework dropdown above the converter, paste your JSON, and the output includes all the classes shown above — no manual editing needed.

Trust, Transparency & Expert Verification

Methodology: W3C HTML5 Semantic Standards

This JSON to HTML Table Converter is independently developed and maintained by Raviraj Bhosale (Founder, jsonformatters.com) to provide developers with a secure and accurate way to visualize structured data in web formats.

No Data Leaves Your Browser

Security is our priority. Your JSON data is converted to HTML code entirely within your browser via JavaScript. No data is ever transmitted to a server or stored in any database.

Semantic HTML5 Output

The generator strictly follows W3C HTML5 table semantics (`thead`, `tbody`, `tr`, `td`), ensuring the generated tables are accessible and easy to style with CSS.

Technical Documentation & Standards:

W3C: Official HTML Tabular Data Standards MDN: HTML Table Element Logic & Accessibility

Last Reviewed: February 2026 · Maintained by Raviraj Bhosale.

Connect with Raviraj Bhosale

Expertise Behind the Tool

Hello! I’m a Web Developer and the founder of jsonformatters.com. My goal is to build tools for developers that are not only fast, but also completely secure and privacy-focused.

Keeping modern 2026 web standards in mind, I optimized this tool using React and Next.js to deliver the best possible performance.

I believe in complete transparency when it comes to my coding skills and projects. You can learn more about my professional experience by connecting with me on my LinkedIn Profile.

Display JSON in HTML with JavaScript: 3 Methods

Prefer writing code? Here are the three most common JavaScript patterns for rendering JSON data as HTML. For a no-code solution, the converter tool above handles all of these automatically.

Method 1 — Vanilla JS: JSON Array → HTML TableMost common

const data = [
  { name: "Alice", role: "Engineer", city: "NYC" },
  { name: "Bob",   role: "Designer", city: "LA"  }
];

function jsonToTable(data) {
  const table = document.createElement("table");
  const thead = table.createTHead();
  const tbody = table.createTBody();

  // Build header row from first object's keys
  const headerRow = thead.insertRow();
  Object.keys(data[0]).forEach(key => {
    const th = document.createElement("th");
    th.textContent = key;          // textContent = XSS-safe ✅
    headerRow.appendChild(th);
  });

  // Build data rows
  data.forEach(item => {
    const row = tbody.insertRow();
    Object.values(item).forEach(value => {
      const td = row.insertCell();
      td.textContent = value;      // textContent = XSS-safe ✅
    });
  });

  return table;
}

document.getElementById("output").appendChild(jsonToTable(data));

Method 2 — Fetch API: Display Live JSON Response as HTML TableAPI responses

async function fetchAndDisplay(apiUrl) {
  const response = await fetch(apiUrl);
  const data = await response.json();  // JSON.parse() built-in

  // Use the jsonToTable() function from Method 1
  // OR paste the API response into the converter above
  const tableEl = jsonToTable(Array.isArray(data) ? data : [data]);
  document.getElementById("output").appendChild(tableEl);
}

// Example with JSONPlaceholder public API
fetchAndDisplay("https://jsonplaceholder.typicode.com/users")
  .catch(err => console.error("Fetch failed:", err));

Method 3 — ES6 Template Literals: JSON to HTML StringQuick & readable

const data = [
  { product: "Laptop", price: 999, stock: 5 },
  { product: "Phone",  price: 599, stock: 12 }
];

const escape = str => String(str)
  .replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;");

const headers = Object.keys(data[0]);

const tableHTML = `
<table>
  <thead>
    <tr>${headers.map(h => `<th>${escape(h)}</th>`).join("")}</tr>
  </thead>
  <tbody>
    ${data.map(row => `
      <tr>${headers.map(h => `<td>${escape(row[h])}</td>`).join("")}</tr>
    `).join("")}
  </tbody>
</table>`;

document.getElementById("output").innerHTML = tableHTML;
// Note: escape() function prevents XSS when using innerHTML

💡 Skip the code entirely: The converter tool at the top of this page handles all three patterns automatically — including nested JSON flattening, HTML escaping, and Bootstrap/Tailwind class injection. Paste your JSON and get production-ready HTML in under 5 seconds.

Frequently Asked Questions

How can I convert JSON to HTML?▼

Paste your JSON array into the editor above, select your preferred framework (Plain HTML, Bootstrap, or Tailwind CSS), choose styling options like striped rows or hover effects, then click 'Convert to HTML.' The tool instantly generates a complete, copy-paste-ready HTML table. You can preview it live before downloading as a .html file. No signup, no server upload — everything runs in your browser.

How can I display JSON data in HTML?▼

There are two approaches: (1) Use this online converter — paste your JSON, get clean HTML code, copy it into your webpage. (2) Write JavaScript — use the fetch() API combined with JSON.parse() and document.createElement() to render JSON dynamically. The online converter is faster for one-time conversions; JavaScript is better for live data that updates automatically from an API.

What is the difference between JSON-LD and JSON to HTML conversion?▼

These are completely different: JSON-LD is structured data placed in your HTML <head> tag — it's invisible to users but helps Google understand your page content for rich snippets. JSON-to-HTML conversion is about displaying JSON data visually on your webpage as a table or list for users to read. This tool does JSON-to-HTML display conversion. For JSON-LD schema markup, use Google's Structured Data Markup Helper instead.

Is this JSON to HTML converter safe to use with sensitive data?▼

Yes — all conversion happens 100% in your browser using JavaScript. Your JSON data is never transmitted to any server, stored in any database, or logged anywhere. The tool also automatically escapes HTML entities in your JSON values (converting < to < and & to &), which prevents XSS injection if you embed the output HTML in your own web application.

Can I convert nested JSON to an HTML table?▼

Yes. Nested JSON objects are automatically flattened using dot notation. For example, { "user": { "name": "Alice", "city": "NYC" } } becomes two table columns: user.name and user.city. Arrays of objects (the most common API response format) are converted so each object becomes one table row. Deeply nested structures (3+ levels) are supported without data loss.

How do I add JSON data to an HTML page using JavaScript?▼

The safest method is: (1) fetch() or define your JSON data, (2) use JSON.parse() if it's a string, (3) loop through the array using forEach(), (4) create DOM elements with document.createElement(), (5) insert values using element.textContent (not innerHTML — to prevent XSS attacks). For quick results without writing code, this converter generates the complete HTML table code you can directly paste into your webpage.

Does the generated HTML work with Bootstrap and Tailwind CSS?▼

Yes — select your preferred framework from the dropdown before converting. Bootstrap output includes classes like table table-striped table-hover and proper <thead class='table-dark'> markup. Tailwind output includes utility classes like w-full border-collapse border border-gray-300 with hover:bg-gray-50 on rows. Both outputs are production-ready and only require the respective CSS framework to be loaded on your page.

Can I use this tool to generate HTML tables for email templates?▼

Yes — this is one of the most popular use cases. Select 'Plain HTML' output (not Bootstrap or Tailwind, since most email clients don't support external CSS frameworks) and enable 'Inline Styles' if available. Email clients like Gmail, Outlook, and Apple Mail require inline CSS on table elements. The plain HTML output with inline border and padding styles works reliably across all major email clients.

What happens to boolean, null, and number values in the HTML table?▼

Number values are displayed as-is (right-aligned in some frameworks). Boolean values (true/false) are displayed as the text strings 'true' or 'false'. Null values are displayed as an empty table cell. Array values within an object are displayed as comma-separated strings. Nested object values are either flattened with dot notation (default) or displayed as JSON strings, depending on nesting depth.