JSON a HTML

Relacionado

Sobre JSON a HTML y tablas HTML

Casos de uso

• Desarrollo frontend: renderiza rápidamente datos JSON de la API como tablas HTML para incrustar en paneles de administración o páginas de documentación
• Proyectos con Tailwind o Bootstrap: escribe directamente las clases de Tailwind o Bootstrap en el campo "table class" para una integración perfecta con tu sistema de estilos
• Páginas web responsivas: con el envoltorio de desplazamiento horizontal activado por defecto, las tablas en móvil no rompen el diseño
• Visualización de datos en blogs, documentos, Confluence, Notion y otras plataformas que admitan incrustar HTML
• Generación de informes: convierte rápidamente datos JSON exportados del backend en informes HTML para email destinados a áreas de negocio
• Prototipado frontend: previsualiza el estilo de la tabla con datos reales en la fase de diseño, para alinearte con producto y diseño antes de la entrega
• Sistemas CMS: crea fragmentos de tablas HTML estáticas para WordPress, Drupal y otros CMS, evitando la complejidad de los motores de plantillas
• Pruebas y depuración: pega en la herramienta la salida de JSON.stringify desde la consola del navegador para previsualizar rápidamente la estructura bidimensional de datos anidados complejos
• Plantillas de email: incrusta tablas HTML en emails HTML (ten en cuenta la compatibilidad con clientes como Outlook)
• Documentación de API: incrusta tablas HTML en Markdown, Swagger o Redoc para reemplazar los ejemplos JSON predeterminados
• Entornos educativos: convierte las entregas de tareas en JSON anidado de los estudiantes a tablas para corregir y mostrar de forma uniforme en cursos de estructuras de datos
• Informes de limpieza de datos: convierte JSON anidados exportados de la base de datos en tablas mediante el modo aplanado para comparar campos fácilmente

Cómo Usar

1. Pega un array JSON (recomendado) o un objeto único en el editor izquierdo, o haz clic en "Sample" para cargar 3 ejemplos de productos, o haz clic en "Upload" para subir un archivo .json o .txt
2. Selecciona en la barra de herramientas el modo de manejo de anidamiento (recomendado "Aplanar"): los objetos anidados se expandirán automáticamente en claves con notación de puntos como `user.name`
3. Haz clic en el botón "Convert" (o simplemente pulsa Enter) para iniciar la conversión; hay una protección de debounce de 500 ms al escribir
4. En la pestaña Code de la derecha consulta el código HTML de la tabla con resaltado de sintaxis, y en la pestaña Preview visualiza el renderizado en vivo del iframe
5. Marca en la barra de herramientas las opciones de estilo (rayas cebra, bordes, hover, compacto, responsivo), rellena la clase table personalizada y define el marcador para null; la vista previa se actualiza al instante
6. Cuando estés conforme, haz clic en "Copy" para copiar el código HTML y pegarlo en tu página web, o en "Download" para descargarlo como table.html; para reiniciar pulsa Reset

Características

• Aplanado automático de objetos anidados: expande recursivamente `{user:{name,age}}` en claves separadas por puntos como `user.name`, `user.age` (separador configurable) sin necesidad de escribir scripts de aplanado
• Tres modos de manejo de anidamiento: Aplanar (Recomendado, expansión automática hasta 6 niveles) / Claves de primer nivel (objetos anidados como una sola columna) / Como cadena (objetos anidados convertidos a vista previa de cadena JSON)
• Ganchos de clase CSS personalizados: inyecta cadenas de clase CSS en `<table>` y opcionalmente en el `<div>` exterior, integrándose perfectamente con sistemas de estilos como Tailwind, Bootstrap o Bulma
• Desplazamiento horizontal responsivo: contenedor exterior por defecto con `overflow-x:auto`, que muestra automáticamente una barra de desplazamiento horizontal en pantallas estrechas sin romper el diseño de la página
• 6 opciones de estilo visual: rayas cebra, bordes, resaltado al pasar el ratón, modo compacto, índice en la primera columna (#), título Caption de tabla, todos aplicables al instante mediante casillas de verificación en la barra de herramientas
• Vista previa en doble pestaña Código e iframe: la pestaña Code muestra el código fuente HTML con resaltado de sintaxis, la pestaña Preview renderiza la tabla real en un iframe sandbox en tiempo real
• Resaltado por tipo: null se muestra en gris cursiva (texto de marcador personalizable), booleanos en verde/rojo según true/false, números en azul, y los objetos anidados muestran el JSON completo al pasar el ratón
• Protección por límite de filas: límite predeterminado de 1000 filas (ajustable de 1 a 10000), con truncamiento automático y aviso de truncamiento en la interfaz para evitar cuelgues del navegador al renderizar DOM muy grandes
• Estadísticas de generación en tiempo real: el panel derecho muestra "X filas × Y columnas generadas" + insignia de truncamiento, para visualizar de un vistazo la escala de los datos al depurar JSON extensos
• Copiar y descargar con un clic: en modo Code puedes copiar el código HTML al portapapeles con un clic, o descargarlo como archivo table.html listo para tu sitio web
• Datos de ejemplo y carga de archivos: 3 ejemplos de productos integrados (Laptop / Mouse / Desk Chair) con carga con un clic, además de soporte para arrastrar o subir archivos .json / .txt
• Restablecimiento de opciones con un clic: el botón Reset a la derecha de la barra de herramientas restaura las 14 opciones configurables a sus valores predeterminados para iterar rápido
• Historial local: almacenamiento persistente en localStorage de las últimas 200 entradas, recuperables tras refrescar o cerrar accidentalmente la página
• Ejecución 100% local en el navegador: todo el procesamiento de JSON, generación de HTML y operaciones de copia/descarga se realizan en tu navegador, sin subir datos a ningún servidor

Ejemplos de Código

// 1) Llama a la API de GitHub para obtener la lista de usuarios
async function fetchUsers() {
  const res = await fetch('https://api.github.com/users?per_page=10');
  return await res.json();
}

// 2) Función de aplanado anidado (equivalente a la lógica de aplanado de la herramienta)
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) Convierte los datos aplanados a tabla HTML, inyectando clases de Tailwind
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) Inyecta en la página
const users = await fetchUsers();
const html = generateHtmlTable(users);
document.getElementById('table-container').innerHTML = html;
console.log('Generadas ' + users.length + ' filas, columnas ' + (Object.keys(flattenObject(users[0])).length));

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):
    """Aplana recursivamente objetos anidados"""
    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>Sin datos</p>"

    # Truncar por número de filas
    truncated = False
    if len(data) > max_rows:
        data = data[:max_rows]
        truncated = True

    # Aplanar cada fila
    flat_rows = [flatten(row) for row in data]

    # Recopilar todas las columnas (set para deduplicar, conservando el orden)
    columns = []
    for row in flat_rows:
        for k in row.keys():
            if k not in columns:
                columns.append(k)

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

    # Generar filas de la tabla
    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">Datos truncados a las primeras {max_rows} filas</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) Usa jq para agrupar los logs anidados y aplanarlos a claves con notación de puntos
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) Pega stats.json en esta herramienta
#    Selecciona en la barra de herramientas el modo "Aplanar (Recomendado)"
#    Marca "Rayas cebra + Envoltorio responsivo + Bordes"
#    En el campo table class escribe: min-w-full text-sm border-collapse
#    Marcador para null: - (los campos faltantes se muestran como -)
#    Caption: Estadísticas de logs de producción 2026-07
#    Haz clic en Convert y descarga table.html

# 3) Súbelo a un sitio estático en S3 / OSS
aws s3 cp table.html s3://my-bucket/reports/2026-07.html --acl public-read

# O incrústalo en documentación de Confluence / Notion / VuePress
sed -i '' 's/min-w-full/min-w-full shadow-md/g' table.html

# O envía un email HTML
mutt -e "set content_type=text/html" -s "Logs de errores 2026-07" tu@email.com < table.html

Preguntas Frecuentes

Solución de problemas

Glosario

Tabla HTML (HTML Table)

Elemento estándar del W3C para presentar datos estructurados, compuesto por etiquetas semánticas como table / thead / tbody / tr / th / td / caption. El código generado por esta herramienta sigue estrictamente esta estructura.

Array JSON

Colección de objetos envuelta entre corchetes [...]. La herramienta toma cada objeto del array como una fila de la tabla; si está vacío, no se genera tabla (se muestra un aviso).

Objeto JSON

Colección de pares clave-valor envuelta entre llaves {}. La herramienta usa cada clave del objeto como cabecera y el valor como celda; un objeto único se envuelve automáticamente como tabla de una sola fila.

Aplanado anidado (Flatten)

Expandir recursivamente un objeto anidado en claves planas separadas por puntos; por ejemplo, {user:{name:'A'}} → 'user.name'. La herramienta admite aplanado automático de hasta 6 niveles, con separador configurable.

thead / tbody

Dos particiones semánticas de la tabla HTML: thead envuelve la fila de cabecera (th), tbody envuelve las filas de datos (td). El código generado por esta herramienta distingue estrictamente ambas partes.

Caption

Etiqueta de título de la tabla, ubicada en la primera línea dentro de table. La herramienta admite texto de Caption personalizado; al activarlo se mostrará el título sobre la tabla, útil para SEO y accesibilidad.

Rayas cebra (Zebra Striping)

Patrón visual que alterna colores de fondo en filas pares e impares, comúnmente con la combinación #fff / #f9fafb. La herramienta lo activa con la casilla "Rayas cebra" y mejora notablemente la legibilidad en tablas largas.

Estilo en línea (Inline Style)

Escribir CSS directamente en el atributo style de las etiquetas HTML, en lugar de referenciar hojas de estilo externas. Por defecto la herramienta emite todos los estilos con style inline, listos para usar sin archivos CSS adicionales.

Gancho de clase CSS

Capacidad diferencial de la herramienta: inyecta cualquier cadena de clase (por ejemplo, clases de Tailwind) en la etiqueta `<table>`, integrándose con frameworks CSS existentes. Es la mejora clave frente a la competencia.

iframe sandbox

Modo de sandbox seguro de la etiqueta iframe en HTML, que permite restringir la ejecución de scripts, envíos de formularios, etc. La herramienta usa un iframe con sandbox="allow-same-origin" para previsualizar el HTML generado y evitar la ejecución accidental de scripts.

Resaltado por tipo (type-aware)

Capacidad diferencial de la herramienta: aplica colores diferentes según el tipo JS del valor de la celda (null / boolean / number / object / string), haciendo más intuitiva la depuración de datos de la API.

Historial en localStorage

Almacenamiento local de clave-valor del navegador (capacidad aproximada de 5-10 MB). La herramienta usa localStorage para conservar las últimas 200 entradas, recuperables tras refrescar o cerrar accidentalmente la página.

Envoltorio responsivo (Responsive Wrapper)

Añadir un `<div style="overflow-x:auto;max-width:100%;">` alrededor de la tabla para que aparezca automáticamente una barra de desplazamiento horizontal en pantallas estrechas. La herramienta lo activa por defecto y se puede desactivar en la barra de herramientas.

Debounce (antirrebote)

Técnica de optimización de rendimiento frontend: combina las devoluciones de llamada de eventos de alta frecuencia (como la entrada) en una sola ejecución tras la última activación. La herramienta aplica un debounce de 500 ms para evitar cuelgues al analizar archivos grandes.

W3C HTML5

Estándar HTML definido por el World Wide Web Consortium (W3C). El código generado por la herramienta cumple la especificación HTML5 y se renderiza correctamente en todos los navegadores modernos.

Comparativa de los tres modos de manejo de objetos anidados

La barra de herramientas ofrece tres modos para diferentes escenarios de anidamiento. Recomendamos elegir según la complejidad de la estructura JSON:

Tabla rápida de las 14 opciones configurables de la barra de herramientas

Resumen de las 14 opciones configurables de la barra de herramientas y sus diferencias visuales, para elegir combinaciones con rapidez:

Tabla rápida de las reglas de resaltado por tipo en las celdas

La herramienta aplica automáticamente distintos colores según el tipo JavaScript del valor JSON, para identificar el tipo de dato rápidamente:

Privacy & Security

Esta herramienta de JSON a HTML realiza todo el procesamiento de JSON, aplanado de objetos anidados, generación de HTML y operaciones de copia/descarga íntegramente en tu navegador mediante JavaScript local. Ni los datos JSON introducidos ni el código HTML generado se suben a ningún servidor, ni se registran, almacenan en caché ni se guardan en la nube. Puedes usar con total confianza JSON que contenga respuestas internas de API o campos de negocio no publicados; al cerrar la página se eliminan todos los datos.

Authoritative References

• MDNMDN - Elemento HTML <table>
• MDNMDN - Conceptos básicos de tablas HTML
• W3CW3C HTML5 - Elemento table
• MDNMDN - Atributo sandbox de iframe
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Estilos de tabla
• BootstrapBootstrap - Tablas