Convertir JSON a HTML

Un navegador, un sistema de documentación o un sitio web estático puede requerir que HTML muestre datos JSON como una página legible en lugar de texto estructurado sin formato. La conversión también puede producir un informe offline imprimible y fácil de compartir, pero el resultado requiere una plantilla de diseño porque JSON almacena datos y HTML define la presentación.

Qué contiene JSON

JSON (JavaScript Object Notation) es un formato de texto sin formato compuesto por objetos, matrices, cadenas, números, valores booleanos y null. Las API, los archivos de configuración, las bases de datos, las herramientas de exportación, las aplicaciones JavaScript y servicios como GitHub lo utilizan habitualmente. JSON representa valores y relaciones; no define el diseño de la página, los colores, la navegación, las tablas ni el comportamiento del navegador.

Qué proporciona HTML

HTML (HyperText Markup Language) es el formato de documento que muestran los navegadores web. Elementos como <h1>, <p>, <table> y <ul> definen encabezados, párrafos, tablas y listas. CSS puede controlar la apariencia, y HTML puede incluir enlaces, imágenes, estilos de impresión y scripts del lado del cliente. Un archivo HTML generado puede abrirse offline y adjuntarse a la documentación, aunque no proporciona automáticamente las funciones de búsqueda, ordenación, gráficos o autenticación de una aplicación web.

Convertir con un script local de Python

Un script local es adecuado para datos confidenciales y conversiones repetibles. Conserva los objetos y matrices anidados, escribe HTML en UTF-8 y escapa los valores para que el texto JSON no pueda convertirse en marcado ejecutable.

1. Instala Python 3.
2. Crea json_to_html.py en la carpeta que contiene el archivo de origen.
3. Pega este 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. Ejecuta el script:

python json_to_html.py data.json data.html

Abre data.html en un navegador. Edita el CSS del script para cambiar el espaciado, las fuentes, los colores o el ancho. Para los registros que necesiten columnas, reemplaza el renderizador recursivo genérico por una plantilla que asigne los campos conocidos a elementos <th> y <td>; un renderizador genérico no puede inferir las columnas ni el orden deseados.

Usar herramientas online y de escritorio

Para un archivo puntual que no contenga datos confidenciales, un servicio basado en navegador como el conversor JSON-to-HTML de Code Beautify puede generar HTML sin instalar software. Comprueba el resultado y la política de privacidad del servicio, y no subas contraseñas, tokens de API, información personal ni registros confidenciales. Un editor de escritorio como VS Code o JSONBuddy puede formatear y validar JSON antes de la conversión, pero un editor por sí solo no crea un diseño HTML significativo a partir de datos arbitrarios. Usa el script de Python o una plantilla HTML personalizada para obtener resultados locales y repetibles.

Gestionar por separado las copias de seguridad de marcadores de Firefox

Las copias de seguridad de marcadores de Firefox utilizan JSON, pero no son exportaciones de datos normales destinadas a mostrarse directamente como una página web. Chrome generalmente importa marcadores en HTML, no en el formato de copia de seguridad JSON de Firefox. En Firefox, restaura la copia de seguridad mediante Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File y, a continuación, exporta un archivo de marcadores interoperable mediante Import and Backup → Export Bookmarks to HTML. En Chrome, importa el archivo resultante mediante Bookmark manager → Organize → Import bookmarks. Un conversor específico para marcadores, como Transmute, puede ayudar con flujos de trabajo antiguos, pero restaurar la copia de seguridad en Firefox y exportar HTML es la ruta más directa cuando Firefox está disponible. Cambiar el nombre de .json a .html no realiza ninguna conversión.

Limitaciones de calidad y compatibilidad

• No existe un resultado visual universal: JSON no tiene un diseño de página inherente, por lo que la plantilla determina los encabezados, las tablas, el orden y los estilos.
• El script escapa el texto con html.escape de Python. Si posteriormente se insertan valores en atributos HTML, CSS o JavaScript, utiliza también un escape adecuado para ese contexto.
• El JSON mal formado hace que json.loads falle. Valídalo primero con python -m json.tool data.json o con un validador JSON de confianza.
• Las matrices muy grandes pueden crear páginas lentas y de gran tamaño. Filtra o pagina los datos antes de generarlos cuando contengan miles de registros.
• El HTML generado contiene una instantánea de los datos, no el comportamiento de la aplicación original. Añade JavaScript o código del lado del servidor para el filtrado, la ordenación, los gráficos, las actualizaciones en tiempo real o el control de acceso.
• Los conversores online pueden modificar el formato, omitir estructuras no compatibles, imponer límites de tamaño de archivo o conservar los archivos subidos. Compara la página generada con el origen antes de publicarla o archivarla.