JSON to HTML Table

Related

About JSON to HTML and HTML Tables

Use Cases

• Frontend development: Quickly render JSON data from APIs into HTML tables to embed into admin dashboards or documentation pages
• Tailwind / Bootstrap projects: Paste Tailwind or Bootstrap class names directly into the table class field for seamless integration with your existing style system
• Responsive web pages: Default horizontal scroll wrapper prevents mobile tables from breaking the page layout
• Data visualization display: Paste styled tables into blog, documentation, Confluence, Notion, or any platform that supports HTML embedding
• Report generation: Quickly convert backend-exported JSON data into HTML email reports for business stakeholders
• Frontend prototyping: Preview table styles with real data during the design phase to align with product and design before delivery
• CMS systems: Create static HTML table snippets for WordPress, Drupal, and other CMS platforms, avoiding template engine complexity
• Testing and debugging: Paste JSON.stringify output from the browser console to quickly preview the two-dimensional structure of complex nested data
• Email templates: Inline the table HTML into HTML emails (test for Outlook compatibility)
• API documentation: Embed HTML tables in Markdown, Swagger, or Redoc as a replacement for default JSON examples
• Teaching scenarios: Convert nested JSON assignments in data structure courses into unified table displays for batch grading
• Data cleansing reports: Use Flatten mode to convert nested JSON from database exports into tables for easy field comparison

How to Use

1. Paste a JSON array (recommended) or a single object into the left editor, or click "Sample" to load 3 product examples, or click "Upload" to load a .json / .txt file
2. Choose a nesting mode in the toolbar (recommended: Flat). Nested objects automatically expand to dot-separated keys like `user.name`
3. Click "Convert" (or simply press Enter) to trigger the conversion. A 500ms debounce protects against excessive re-parsing
4. Switch to the Code tab on the right to view the syntax-highlighted HTML table code, or the Preview tab to see the real-time iframe rendering
5. Toggle style options in the toolbar (zebra striping, borders, hover, compact, responsive), enter a custom table class, set the null placeholder — the live preview updates instantly
6. When satisfied, click "Copy" to copy the HTML code or "Download" to save as table.html. Click Reset if you need to start over

Features

• Nested object auto-flatten: Recursively expand `{user:{name,age}}` into `user.name`, `user.age` columns (configurable separator), no manual flatten script needed
• Three nesting modes: Flat (Recommended, auto-expand up to 6 levels) / Top-level Keys (nested object as single column) / String (nested object as JSON string preview)
• Custom CSS class hook: Inject any class string into `<table>` and the optional wrapper `<div>`, seamlessly integrating with Tailwind / Bootstrap / Bulma style systems
• Responsive horizontal scroll: Default outer wrapper with `overflow-x:auto` container, horizontal scrollbar appears automatically on narrow screens without breaking page layout
• 6 visual style toggles: Zebra striping, borders, row hover highlight, compact mode, first-column index (#), and table caption — toolbar checkboxes apply instantly
• Code + iframe preview dual tabs: Code tab shows syntax-highlighted HTML source; Preview tab renders the real table in a sandboxed iframe in real time
• Type-aware highlighting: null shown as gray italic (customizable placeholder text), booleans colored green/red, numbers in blue, nested objects viewable as full JSON on hover
• Row limit protection: Default 1000-row cap (configurable 1-10000), automatically truncates with a "Truncated" notice to prevent browser slowdowns on huge DOM
• Generation statistics feedback: Right panel shows "Generated X rows × Y columns" + truncation badge for instant data scale visibility during long-JSON debugging
• One-click copy / download: In Code mode, copy the HTML source to clipboard, or download as table.html file ready to use on any website
• Sample data + file upload: 3 built-in product samples (Laptop / Mouse / Desk Chair) for one-click loading, plus drag-and-drop or click upload for .json / .txt files
• One-click Reset: Toolbar Reset button instantly restores all 14 configuration options to defaults, perfect for fast iteration
• Local history: localStorage-based persistence of the most recent 200 inputs, recoverable after refresh or accidental tab close
• Fully local browser processing: All JSON parsing, HTML generation, copy and download happen in your browser, no data is uploaded to any server

Code Examples

// 1) Call GitHub API to fetch user list
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Nested flatten function (equivalent to the tool's flatten logic)
function flattenObject(obj, prefix = '', sep = '.', result = {}) {
  for (const [k, v] of Object.entries(obj || {})) {
    const key = prefix ? `${prefix}${sep}${k}` : k;
    if (v && typeof v === 'object' && !Array.isArray(v)) {
      flattenObject(v, key, sep, result);
    } else {
      result[key] = v;
    }
  }
  return result;
}

// 3) Convert flattened data to HTML table, inject Tailwind classes
function generateHtmlTable(rows) {
  const flat = rows.map(r => flattenObject(r));
  const cols = [...new Set(flat.flatMap(r => Object.keys(r)))];
  const thead = cols.map(c => `<th class="px-4 py-2 text-left">${c}</th>`).join('');
  const tbody = flat.map(r =>
    `<tr class="border-b hover:bg-gray-50">${cols.map(c => `<td class="px-4 py-2">${r[c] ?? 'N/A'}</td>`).join('')}</tr>`
  ).join('');
  return `<table class="min-w-full text-sm">
  <thead class="bg-gray-100"><tr>${thead}</tr></thead>
  <tbody>${tbody}</tbody>
</table>`;
}

// 4) Inject into the page
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Generated ' + users.length + ' rows, ' + (Object.keys(flattenObject(users[0])).length) + ' columns');

from flask import Flask, jsonify, render_template_string
import json

app = Flask(__name__)

TEMPLATE = """
<!doctype html><html><body>
<div class="overflow-x-auto">{{ table_html | safe }}</div>
</body></html>
"""

def flatten(obj, prefix='', sep='.', result=None):
    """Recursively flatten nested objects"""
    if result is None:
        result = {}
    for k, v in (obj or {}).items():
        key = f"{prefix}{sep}{k}" if prefix else k
        if isinstance(v, dict):
            flatten(v, key, sep, result)
        else:
            result[key] = v
    return result

def json_to_html_table(data, table_class='min-w-full border-collapse',
                        max_rows=1000, responsive=True):
    if isinstance(data, dict):
        data = [data]
    if not data:
        return "<p>No data</p>"

    # Row truncation
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Flatten each row
    flat_rows = [flatten(row) for row in data]

    # Collect all column names (using set to dedupe, preserving insertion order)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

    # Generate thead
    thead = "".join(f'<th class="px-4 py-2 text-left bg-gray-100">{c}</th>' for c in columns)

    # Generate table rows
    rows = []
    for i, row in enumerate(flat_rows):
        bg = "bg-gray-50" if i % 2 == 1 else ""
        tds = "".join(
            f'<td class="px-4 py-2 {bg}">{("N/A" if row.get(c) is None else row.get(c, ""))}</td>'
            for c in columns
        )
        rows.append(f'<tr class="hover:bg-blue-50">{tds}</tr>')

    html = f'<table class="{table_class}"><thead><tr>{thead}</tr></thead><tbody>{"".join(rows)}</tbody></table>'
    if responsive:
        html = f'<div class="overflow-x-auto">{html}</div>'

    if truncated:
        html = f'<p class="text-amber-600 text-sm">Data truncated to the first {max_rows} rows</p>{html}'

    return html


@app.route('/api/users')
def users():
    data = json.load(open('users.json'))
    return jsonify(data)

@app.route('/users.html')
def users_html():
    import requests
    data = requests.get('http://localhost:5000/api/users').json()
    return render_template_string(TEMPLATE, table_html=json_to_html_table(data))


if __name__ == '__main__':
    app.run(debug=True)

# 1) Use jq to aggregate and flatten nested logs to dot-separated keys
cat app.log | jq -s '
  group_by(.response.status_code) |
  map({
    status: .[0].response.status_code,
    count: length,
    "first_request.method": .[0].request.method,
    "last_request.url": .[-1].request.url,
    "first_seen": min_by(.timestamp).timestamp,
    "last_seen": max_by(.timestamp).timestamp
  })
' > stats.json

# 2) Paste stats.json into this tool
#    Select "Flat (Recommended)" in the toolbar
#    Check "Zebra striping + Responsive wrap + Borders"
#    In table class name enter: min-w-full text-sm border-collapse
#    Set null placeholder: - (missing fields show as -)
#    Set Caption: 2026-07 Production Error Log Stats
#    Click Convert then download table.html

# 3) Upload to S3 / OSS static site
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# Or embed into Confluence / Notion / VuePress docs
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# Or send as an HTML email
mutt -e "set content_type=text/html" -s "2026-07 Error Log" your@email.com < table.html

FAQ

Troubleshooting

Glossary

HTML Table

A W3C-standard structured data display element, composed of semantic tags like table / thead / tbody / tr / th / td / caption. The code generated by this tool strictly follows this structure.

JSON Array

A collection of objects wrapped in square brackets [...]. The tool uses each object in the array as a table row; an empty array produces no table (a notice is shown).

JSON Object

A collection of key-value pairs wrapped in curly braces {}. The tool uses each key of the object as a table header and the value as a cell; a single object is automatically wrapped as a single-row table.

Flatten

Recursively expanding nested objects into dot-separated flat key names, e.g. {user:{name:'A'}} → 'user.name'. The tool supports 6-level auto-flatten with a configurable separator.

thead / tbody

The two semantic partitions of an HTML table: thead wraps the header row (th), tbody wraps the data rows (td). The code generated by the tool strictly distinguishes these two parts.

Caption

The table title tag, located in the first row inside the table. The tool supports custom caption text. When enabled, the specified title is shown above the table, which is helpful for SEO and accessibility.

Zebra Striping

A visual pattern where odd and even rows alternate background colors, commonly #fff / #f9fafb. The tool enables this via the "Zebra Striping" checkbox, significantly improving readability for long tables.

Inline Style

Writing CSS directly through the style attribute of an HTML tag, rather than referencing an external stylesheet. The tool outputs all styles as inline style by default, so the code can be used as-is without additional CSS files.

CSS class hook

The tool's differentiated capability: injecting any class string (such as a Tailwind class) on the `<table>` tag, integrating seamlessly with existing CSS frameworks. This is a key upgrade over competitors.

iframe sandbox

The secure sandbox mode of the HTML iframe tag, which can restrict script execution and form submission. The tool uses an iframe with sandbox="allow-same-origin" to preview generated HTML, preventing accidental script execution.

Type-aware highlighting

The tool's differentiated capability: applying different colors based on the JS type of the cell value (null / boolean / number / object / string), making API data debugging more intuitive.

localStorage history

The local key-value storage provided by the browser (capacity ~5-10MB). The tool uses localStorage to persistently save the most recent 200 inputs, which can be quickly restored after a refresh or accidental tab close.

Responsive Wrapper

Wrapping the table in an outer `<div style="overflow-x:auto;max-width:100%;">` so the table automatically gets a horizontal scrollbar on narrow screens. The tool enables this by default; it can be turned off in the toolbar.

Debounce

A frontend performance optimization technique: merging high-frequency event callbacks (like input) into a single execution after the last trigger. The tool sets a 500ms debounce to avoid lag from large file parsing.

W3C HTML5

The HTML standard specification created by the World Wide Web Consortium (W3C). The code generated by the tool conforms to the HTML5 spec and renders correctly in all modern browsers.

Comparison of Three Nesting Modes

The toolbar provides three modes for different nesting scenarios. Choose based on the complexity of your JSON structure:

Toolbar 14 Configurable Options Cheat Sheet

All 14 configurable options in the toolbar and their visual differences, for quick combination selection:

Type-Aware Cell Highlighting Rules Cheat Sheet

The tool automatically applies different colors based on the JavaScript type of the JSON value for quick data type recognition:

Privacy & Security

This JSON to HTML tool runs all JSON parsing, nested flatten, HTML generation, copy, and download operations entirely in your browser via JavaScript. The input JSON data and generated HTML code are not uploaded to any server, nor are they logged, cached, or stored in the cloud. You can safely use this tool with sensitive unreleased API responses and internal business fields — closing the page clears all data.

Authoritative References

• MDNMDN - HTML <table> element
• MDNMDN - HTML Tables Basics
• W3CW3C HTML5 Spec - table element
• MDNMDN - iframe sandbox attribute
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Table Styles
• BootstrapBootstrap - Tables