Converter JSON para HTML

Um navegador, sistema de documentação ou site estático pode exigir HTML para exibir dados JSON como uma página legível em vez de texto estruturado bruto. A conversão também pode produzir um relatório offline imprimível e compartilhável, mas o resultado exige um modelo de layout, pois JSON armazena dados e HTML define a apresentação.

O que JSON contém

JSON (JavaScript Object Notation) é um formato de texto simples composto por objetos, arrays, strings, números, valores Booleanos e null. APIs, arquivos de configuração, bancos de dados, ferramentas de exportação, aplicações JavaScript e serviços como GitHub costumam utilizá-lo. JSON representa valores e relações; ele não define layout de página, cores, navegação, tabelas ou comportamento do navegador.

O que HTML fornece

HTML (HyperText Markup Language) é o formato de documento renderizado pelos navegadores. Elementos como <h1>, <p>, <table> e <ul> definem títulos, parágrafos, tabelas e listas. CSS pode controlar a aparência, e HTML pode incluir links, imagens, estilos de impressão e scripts do lado do cliente. Um arquivo HTML gerado pode ser aberto offline e anexado à documentação, embora não forneça automaticamente os recursos de pesquisa, classificação, gráficos ou autenticação de uma aplicação web.

Converter com um script Python local

Um script local é adequado para dados confidenciais e conversões repetíveis. Ele preserva objetos e arrays aninhados, grava HTML em UTF-8 e escapa valores para que o texto JSON não se torne marcação executável.

1. Instale Python 3.
2. Crie json_to_html.py na pasta que contém o arquivo de origem.
3. Cole 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. Execute o script:

python json_to_html.py data.json data.html

Abra data.html em um navegador. Edite o CSS no script para alterar espaçamento, fontes, cores ou largura. Para registros que precisam de colunas, substitua o renderizador recursivo genérico por um modelo que mapeie campos conhecidos para elementos <th> e <td>; um renderizador genérico não consegue inferir as colunas ou a ordenação desejadas.

Use ferramentas online e para desktop

Para um arquivo isolado que não contenha dados confidenciais, um serviço baseado em navegador, como o conversor JSON-to-HTML da Code Beautify, pode gerar HTML sem instalar software. Verifique a saída e a política de privacidade do serviço e não envie senhas, tokens de API, informações pessoais ou registros confidenciais. Um editor para desktop, como VS Code ou JSONBuddy, pode formatar e validar JSON antes da conversão, mas um editor sozinho não cria um design HTML significativo a partir de dados arbitrários. Use o script Python ou um modelo HTML personalizado para obter uma saída local e repetível.

Trate os backups de favoritos do Firefox separadamente

Os backups de favoritos do Firefox usam JSON, mas não são exportações de dados comuns destinadas à exibição direta como uma página web. O Chrome geralmente importa favoritos em HTML, não no formato de backup JSON do Firefox. No Firefox, restaure o backup por meio de Bookmarks → Manage bookmarks → Import and Backup → Restore → Choose File e, em seguida, exporte um arquivo de favoritos interoperável por meio de Import and Backup → Export Bookmarks to HTML. No Chrome, importe o arquivo resultante por meio de Bookmark manager → Organize → Import bookmarks. Um conversor específico para favoritos, como Transmute, pode ajudar em fluxos de trabalho antigos, mas restaurar o backup no Firefox e exportar HTML é o caminho mais direto quando o Firefox está disponível. Renomear .json para .html não realiza uma conversão.

Limitações de qualidade e compatibilidade

• Não existe um resultado visual universal: JSON não possui um design de página inerente, portanto o modelo determina os títulos, as tabelas, a ordenação e o estilo.
• O script escapa o texto com html.escape do Python. Se os valores forem posteriormente inseridos em atributos HTML, CSS ou JavaScript, use também o escape apropriado para esse contexto.
• JSON malformado faz com que json.loads falhe. Valide-o primeiro com python -m json.tool data.json ou um validador JSON confiável.
• Arrays muito grandes podem criar páginas lentas e excessivamente grandes. Filtre ou pagine os dados antes da geração quando eles contiverem milhares de registros.
• O HTML gerado contém um instantâneo dos dados, não o comportamento da aplicação original. Adicione JavaScript ou código do lado do servidor para filtragem, classificação, gráficos, atualizações em tempo real ou controle de acesso.
• Conversores online podem alterar a formatação, omitir estruturas não compatíveis, impor limites de tamanho de arquivo ou manter arquivos enviados. Compare a página gerada com a origem antes de publicá-la ou arquivá-la.