JSON para HTML

Sugestões Relacionadas

Sobre JSON para HTML e tabelas HTML

Casos de uso

• Desenvolvimento frontend: renderizar rapidamente dados JSON de retorno de API em tabelas HTML para incorporar em painéis administrativos ou páginas de documentação
• Projetos com Tailwind / Bootstrap: inserir classes do Tailwind ou Bootstrap diretamente no campo 'Classe CSS da tabela', integrando-se perfeitamente ao sistema de estilos existente
• Páginas web responsivas: com o wrapper de rolagem horizontal ativado por padrão, tabelas em dispositivos móveis não quebram o layout
• Visualização de dados: colar tabelas com estilo em plataformas que suportam incorporação HTML como blogs, documentação, Confluence, Notion
• Geração de relatórios: converter rapidamente dados JSON exportados do backend em relatórios HTML para e-mail a serem enviados para áreas de negócio
• Prototipagem frontend: usar dados reais na fase de design para pré-visualizar o estilo da tabela, facilitando o alinhamento com produto/design antes da entrega
• Sistemas CMS: criar trechos de tabela HTML estáticos para WordPress / Drupal, evitando a complexidade de templates
• Testes e depuração: colar a saída de JSON.stringify do console do navegador para pré-visualizar rapidamente a estrutura bidimensional de dados aninhados complexos
• Templates de e-mail: incorporar o HTML da tabela em e-mails HTML (atenção: testar compatibilidade com clientes como Outlook)
• Documentação de API: incorporar tabelas HTML em Markdown / Swagger / Redoc substituindo os exemplos JSON padrão
• Cenários educacionais: converter JSONs aninhados de trabalhos de alunos em tabelas unificadas para correção e apresentação em cursos de estruturas de dados
• Relatórios de limpeza de dados: converter JSONs aninhados exportados de bancos de dados em tabelas usando o modo de nivelamento, facilitando a comparação de campos

Como Usar

1. Cole um array JSON (recomendado) ou um único objeto no editor à esquerda, ou clique em 'Sample' para carregar 3 exemplos de produtos, ou clique em 'Upload' para enviar um arquivo .json / .txt
2. Selecione o modo de tratamento de aninhamento na barra de ferramentas (recomendado 'Nivelar'); objetos aninhados serão expandidos automaticamente em chaves com notação de ponto como `user.name`
3. Clique no botão 'Convert' (ou pressione Enter) para acionar a conversão; há uma proteção de debounce de 500ms durante a digitação
4. Visualize o código de tabela HTML com destaque de sintaxe na aba Código à direita, e o efeito renderizado em tempo real via iframe na aba Preview
5. Marque opções de estilo na barra de ferramentas (listras / bordas / hover / compacto / responsivo), preencha a classe CSS personalizada da tabela, defina o espaço reservado para null; a pré-visualização é atualizada automaticamente em tempo real
6. Após satisfeito, clique em 'Copy' para copiar o código HTML e colar em uma página web, ou clique em 'Download' para baixar como table.html; para redefinir, clique em Reset

Recursos

• Nivelamento automático de objetos aninhados: expande recursivamente `{user:{name,age}}` em chaves separadas por ponto como `user.name`, `user.age` (separador configurável), sem precisar escrever scripts de nivelamento manualmente
• Três modos de tratamento de aninhamento: Nivelar (Recomendado, expansão automática até 6 níveis) / Chaves de primeiro nível (objetos aninhados como coluna única) / Como string (objetos aninhados convertidos em string JSON para pré-visualização)
• Ganchos de classe CSS personalizada: injeta strings de classe CSS personalizada em `<table>` e opcionalmente em um `<div>` externo, integrando-se perfeitamente com Tailwind, Bootstrap, Bulma e outros sistemas de estilo
• Rolagem horizontal responsiva: envolve por padrão em um contêiner `overflow-x:auto`, com barra de rolagem horizontal automática em telas estreitas, sem distorcer o layout da página
• 6 opções de estilo visual: listras, bordas, destaque ao passar o mouse, modo compacto, índice na primeira coluna (#), legenda (Caption) da tabela, ativadas em tempo real pelas caixas de seleção da barra de ferramentas
• Pré-visualização em duas abas Código e iframe: a aba Código mostra o código-fonte HTML com destaque de sintaxe, a aba Preview renderiza o efeito real da tabela em um iframe sandbox em tempo real
• Destaque por tipo: null exibido em cinza itálico (texto do espaço reservado personalizável), booleanos verde/vermelho para true/false, números em azul, objetos aninhados com visualização do JSON completo ao passar o mouse
• Proteção por limite de linhas: limite padrão de 1000 linhas (ajustável de 1 a 10000), com truncamento automático e aviso na interface quando excedido, evitando travamentos do navegador ao renderizar DOMs muito grandes
• Feedback estatístico da geração: o painel direito mostra em tempo real 'Geradas X linhas × Y colunas' + selo de truncamento, facilitando visualizar a escala dos dados ao depurar JSONs longos
• Copiar/Baixar com um clique: no modo Código é possível copiar o código-fonte HTML para a área de transferência ou baixar como arquivo table.html pronto para uso em sites
• Dados de exemplo + upload de arquivo: 3 exemplos de produtos integrados (Laptop / Mouse / Desk Chair) com carregamento por um clique, além de suporte a arrastar e soltar ou clicar para fazer upload de arquivos .json / .txt
• Redefinição das opções com um clique: o botão Reset no canto direito da barra de ferramentas restaura todas as 14 opções configuráveis aos valores padrão, facilitando experimentar configurações rapidamente
• Histórico local: persistência via localStorage das últimas 200 entradas, permitindo recuperação rápida após atualizar a página ou fechá-la acidentalmente
• Execução 100% local no navegador: toda a análise de JSON, geração de HTML e operações de copiar/baixar são feitas no seu navegador, sem envio de dados a nenhum servidor

Exemplos de Código

// 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) Flatten nested object function (equivalent to the tool's flattening 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 into HTML table, inject Tailwind class
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('Geradas ' + users.length + ' linhas, ' + (Object.keys(flattenObject(users[0])).length) + ' colunas');

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 object"""
    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>Sem dados</p>"

    # Truncate rows
    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 (deduplicate with set, preserve 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">Dados truncados para as primeiras {max_rows} linhas</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 into dot-notation 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 the "Nivelar (Recomendado)" mode in the toolbar
#    Check "Listras + Wrapper responsivo + Bordas"
#    In the table class field enter: min-w-full text-sm border-collapse
#    Set null placeholder: - (missing fields display as -)
#    Set Caption: Estatísticas de log de erros de produção 2026-07
#    Click Convert and 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 HTML email
mutt -e "set content_type=text/html" -s "Log de erros 2026-07" your@email.com < table.html

Perguntas frequentes

Solução de Problemas

Glossário

Tabela HTML (HTML Table)

Elemento padrão W3C para exibição de dados estruturados, composto por tags semânticas como table / thead / tbody / tr / th / td / caption. O código gerado por esta ferramenta segue rigorosamente essa estrutura.

Array JSON

Conjunto de objetos envolto por colchetes [...]. A ferramenta trata cada objeto do array como uma linha da tabela; arrays vazios não geram tabela (exibe um aviso).

Objeto JSON

Conjunto de pares chave-valor envolto por chaves {}. A ferramenta trata cada chave do objeto como cabeçalho e o valor como célula; um único objeto é automaticamente empacotado como uma tabela de uma única linha.

Nivelamento aninhado (Flatten)

Expandir recursivamente objetos aninhados em chaves planas separadas por ponto, por exemplo {user:{name:'A'}} → 'user.name'. A ferramenta suporta nivelamento automático até 6 níveis de profundidade, com separador configurável.

thead / tbody

Duas seções semânticas da tabela HTML: thead envolve as linhas de cabeçalho (th) e tbody envolve as linhas de dados (td). O código gerado por esta ferramenta distingue rigorosamente essas duas partes.

Caption

Tag de título da tabela, localizada na primeira linha interna da table. A ferramenta suporta texto personalizado para Caption, que ao ser ativado exibe o título especificado acima da tabela, sendo útil para SEO e acessibilidade.

Listras (Zebra Striping)

Padrão visual em que linhas ímpares e pares da tabela usam cores de fundo alternadas, comumente combinando #fff / #f9fafb. A ferramenta ativa esse padrão pela caixa de seleção 'Listras', melhorando significativamente a legibilidade de tabelas longas.

Estilo inline (Inline Style)

Escrever CSS diretamente no atributo style de uma tag HTML, em vez de referenciar uma folha de estilo externa. Por padrão, todos os estilos da ferramenta são gerados via style inline, prontos para uso sem a necessidade de arquivos CSS adicionais.

Gancho de classe CSS

Capacidade diferencial desta ferramenta: injetar qualquer string de classe na tag `<table>` (como classes do Tailwind), integrando-se perfeitamente com frameworks CSS existentes. Esta é a melhoria-chave em relação aos concorrentes.

iframe sandbox

Modo sandbox seguro da tag iframe do HTML, que pode limitar a execução de scripts e o envio de formulários. A ferramenta usa um iframe com sandbox="allow-same-origin" para pré-visualizar o HTML gerado, evitando a execução acidental de scripts.

Destaque por tipo (type-aware)

Capacidade diferencial desta ferramenta: aplica cores diferentes conforme o tipo JS do valor da célula (null / boolean / number / object / string), tornando a depuração de dados de API mais intuitiva.

Histórico localStorage

Armazenamento local de chave-valor fornecido pelo navegador (capacidade aproximada de 5-10MB). A ferramenta usa localStorage para persistir as últimas 200 entradas, permitindo recuperação rápida após atualizar a página ou fechá-la acidentalmente.

Wrapper responsivo (Responsive Wrapper)

Adiciona <div style="overflow-x:auto;max-width:100%;"> ao redor da tabela, fazendo com que ela exiba uma barra de rolagem horizontal automática em telas estreitas. A ferramenta ativa por padrão, podendo ser desativado na barra de ferramentas.

Debounce

Técnica de otimização de performance frontend: combinar várias chamadas de eventos de alta frequência (como digitação) em uma única execução após o último disparo. A ferramenta define um debounce de 500ms para evitar travamentos na análise de arquivos grandes.

W3C HTML5

Especificação padrão HTML definida pelo World Wide Web Consortium (W3C). O código gerado por esta ferramenta está em conformidade com a especificação HTML5 e é renderizado corretamente em todos os navegadores modernos.

Tabela comparativa dos três modos de tratamento de objetos aninhados

A barra de ferramentas oferece três modos para diferentes cenários de aninhamento. Recomendamos escolher conforme a complexidade da estrutura do JSON:

Tabela de consulta rápida das 14 opções configuráveis da barra de ferramentas

Todas as 14 opções configuráveis da barra de ferramentas e suas diferenças visuais, para selecionar combinações rapidamente:

Tabela de consulta rápida das regras de destaque por tipo de célula

A ferramenta aplica automaticamente cores diferentes conforme o tipo JavaScript do valor JSON, facilitando a identificação rápida do tipo de dado:

Privacy & Security

Nesta ferramenta de JSON para HTML, todas as operações de análise de JSON, nivelamento aninhado, geração de HTML, copiar e baixar são realizadas inteiramente em JavaScript no seu navegador local. Os dados JSON inseridos e o código HTML gerado não são enviados a nenhum servidor, nem registrados, cacheados ou armazenados na nuvem. JSONs sensíveis com respostas de API não públicas ou campos internos do negócio podem ser usados com tranquilidade; ao fechar a página, todos os dados são apagados.

Authoritative References

• MDNMDN - Elemento HTML <table>
• MDNMDN - Fundamentos de tabelas HTML
• W3CW3C HTML5 Spec - Elemento table
• MDNMDN - Atributo sandbox do iframe
• MDNMDN - JSON.parse / JSON.stringify
• TailwindTailwind CSS - Estilos de tabela
• BootstrapBootstrap - Tables