Convert JSON to HTML

A browser, documentation system, or static website may require HTML to display JSON data as a readable page instead of raw structured text. Converting it can also produce a printable, shareable offline report, but the result requires a layout template because JSON stores data and HTML defines presentation.

What JSON contains

JSON (JavaScript Object Notation) is a plain-text format made of objects, arrays, strings, numbers, Boolean values, and null. APIs, configuration files, databases, export tools, JavaScript applications, and services such as GitHub commonly use it. JSON represents values and relationships; it does not define page layout, colors, navigation, tables, or browser behavior.

What HTML provides

HTML (HyperText Markup Language) is the document format rendered by web browsers. Elements such as <h1>, <p>, <table>, and <ul> define headings, paragraphs, tables, and lists. CSS can control the appearance, and HTML can include links, images, print styles, and client-side scripts. A generated HTML file can be opened offline and attached to documentation, although it does not automatically provide the search, sorting, charts, or authentication of a web application.

Convert with a local Python script

A local script is suitable for sensitive data and repeatable conversions. It preserves nested objects and arrays, writes UTF-8 HTML, and escapes values so JSON text cannot become executable markup.

1. Install Python 3.
2. Create json_to_html.py in the folder containing the source file.
3. Paste in this script:

import json
import sys
from html import escape
from pathlib import Path

def render(value):
    if isinstance(value, dict):
        items = ''.join(
            f'<dt>{escape(str(key))}</dt><dd>{render(item)}</dd>'
            for key, item in value.items()
        )
        return f'<dl>{items}</dl>'
    if isinstance(value, list):
        items = ''.join(f'<li>{render(item)}</li>' for item in value)
        return f'<ol>{items}</ol>'
    if value is None:
        value = 'null'
    elif isinstance(value, bool):
        value = str(value).lower()
    return f'<span>{escape(str(value))}</span>'

source, destination = sys.argv[1], sys.argv[2]
data = json.loads(Path(source).read_text(encoding='utf-8'))
page = f'''<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JSON data</title>
  <style>body{{font:16px system-ui;max-width:900px;margin:2rem auto;padding:0 1rem}}dt{{font-weight:700;margin-top:.75rem}}dd{{margin-left:1.5rem}}li{{margin:.35rem 0}}</style>
</head>
<body>{render(data)}</body>
</html>'''
Path(destination).write_text(page, encoding='utf-8')

4. Run the script:

python json_to_html.py data.json data.html

Open data.html in a browser. Edit the CSS in the script to change spacing, fonts, colors, or width. For records that need columns, replace the generic recursive renderer with a template that maps known fields to <th> and <td> elements; a generic renderer cannot infer the desired columns or ordering.

Use online and desktop tools

For a non-sensitive one-off file, a browser-based service such as Code Beautify's JSON-to-HTML converter can generate HTML without installing software. Check the service's output and privacy policy, and do not upload passwords, API tokens, personal information, or confidential records. A desktop editor such as VS Code or JSONBuddy can format and validate JSON before conversion, but an editor alone does not create a meaningful HTML design from arbitrary data. Use the Python script or a custom HTML template for local, repeatable output.

Handle Firefox bookmark backups separately

Firefox bookmark backups use JSON, but they are not ordinary data exports intended for direct display as a web page. Chrome generally imports bookmarks in HTML, not Firefox's JSON backup format. In Firefox, restore the backup through Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File, then export an interoperable bookmark file through Import and Backup → Export Bookmarks to HTML. In Chrome, import that resulting file through Bookmark manager → Organize → Import bookmarks. A bookmark-specific converter such as Transmute may help with legacy workflows, but restoring the backup in Firefox and exporting HTML is the more direct route when Firefox is available. Renaming .json to .html does not perform a conversion.

Quality and compatibility limits

• There is no universal visual result: JSON has no inherent page design, so the template determines the headings, tables, ordering, and styling.
• The script escapes text with Python's html.escape. If values are later inserted into HTML attributes, CSS, or JavaScript, use escaping appropriate to that context as well.
• Malformed JSON causes json.loads to fail. Validate it first with python -m json.tool data.json or a trusted JSON validator.
• Very large arrays can create slow, oversized pages. Filter or paginate the data before generation when it contains thousands of records.
• Generated HTML contains a snapshot of the data, not the original application's behavior. Add JavaScript or server-side code for filtering, sorting, charts, live updates, or access control.
• Online converters may alter formatting, omit unsupported structures, impose file-size limits, or retain uploaded files. Compare the generated page with the source before publishing or archiving it.