Softonic

Visualizador de HTML Renderizado

Etapa 1 / 2
Próximo

Cole qualquer HTML (um modelo de e-mail, um fragmento de página extraído, um exemplo da documentação) e clique em Renderizar para vê-lo desenhado em um iframe isolado. O quadro roda com a sandbox mais rígida do navegador: os scripts não são executados, os formulários não podem enviar nada e a marcação não pode navegar nem tocar na página ao redor. É a maneira mais rápida de responder “como essa marcação realmente aparece” sem montar um servidor de testes.

Como visualizar HTML

  1. 1

    Cole seu HTML

    Coloque um documento completo ou um fragmento solto na caixa de origem. O que você cola é exatamente o que é renderizado, como está escrito.

  2. 2

    Clique em Renderizar

    O visualizador escreve seu HTML em um iframe isolado e mostra o resultado na própria página.

  3. 3

    Leia a pré-visualização

    O quadro desenha sua marcação como um navegador faria: títulos, tabelas, listas, estilos inline e SVG aparecem todos.

  4. 4

    Ajuste e renderize de novo

    Retoque a origem e renderize quantas vezes quiser para comparar como cada versão fica.

Por que o quadro é isolado

O HTML colado pode conter qualquer coisa: tags <script>, um truque <img onerror="...">, um formulário que envia dados para algum lugar ou um <iframe> que carrega outro site. Para impedir que qualquer disso toque na página, a pré-visualização é escrita em um <iframe sandbox> com o atributo sandbox vazio, a configuração mais restritiva que existe. Nesse modo, o navegador bloqueia ao mesmo tempo a execução de scripts, o envio de formulários, os pop-ups, a navegação de nível superior e o acesso à mesma origem. Você vê o resultado visual sem dar nenhum poder à marcação.

Como os scripts nunca rodam, tudo que depende de JavaScript (um web component que se hidrata ao carregar, um gráfico que se desenha sozinho, um framework que se monta em um <div> vazio) mostra apenas a marcação estática, não o resultado com scripts. É uma escolha deliberada: uma pré-visualização segura e previsível em vez de uma interativa.

O que o visualizador renderiza bem

Tipo de conteúdo Observações
HTML de e-mail Layouts baseados em tabelas e estilos inline aparecem como a maioria dos clientes os desenha
Corpo de post de blog Títulos, listas, citações e imagens aparecem sem nenhum scripting
Fragmento extraído Mostra se a marcação que você capturou está completa o bastante para se sustentar sozinha
SVG inline Desenha em qualquer tamanho, o que ajuda a conferir um ícone
Marcação de componente estático A marcação é renderizada; o comportamento em JavaScript não

Bons usos para esta ferramenta

  • QA de modelos de e-mail. Cole a exportação do seu editor de e-mails e veja o layout sem se enviar uma mensagem de teste.
  • Verificações rápidas de dados extraídos. Você capturou um innerHTML de uma página: ele renderiza de volta em algo coerente? Se não, o fragmento provavelmente está incompleto.
  • Revisão de Markdown para HTML. Passe um texto por um conversor (a ferramenta de HTML para Markdown faz a ida e volta) e veja aqui o HTML resultante.
  • Aprender e ensinar. Cole um exemplo da documentação e observe exatamente como um navegador o organiza.

O que ficar de olho

  • URLs relativas. Imagens e folhas de estilo referenciadas por um caminho relativo como /assets/logo.png não têm servidor contra o qual resolver, então não carregam. Use uma URL absoluta https:// ou um URI data: se precisar que uma imagem apareça.
  • Recursos externos. Fontes, folhas de estilo e imagens carregadas de outros sites dependem de esses sites permitirem; alguns enviam cabeçalhos que bloqueiam o carregamento dentro de um quadro.
  • Sem scripting. Se a sua marcação só ganha vida com JavaScript, a pré-visualização mostra o estado dela antes dos scripts. Isso é esperado, não um erro.

Perguntas frequentes

Sim. A pré-visualização roda em um iframe totalmente isolado, sem nenhuma permissão, então os scripts não podem ser executados e a marcação não pode alcançar a página ao redor. Até um HTML malicioso só consegue desenhar a si mesmo dentro do quadro.

Não. A sandbox bloqueia totalmente a execução de scripts, então as tags <script> e os manipuladores de eventos inline são ignorados. Você vê a marcação estática, que é justamente o que torna a pré-visualização segura.

Um caminho relativo não tem nada contra o que resolver, e alguns hosts enviam cabeçalhos que impedem o carregamento das suas imagens dentro de um quadro. Use uma URL absoluta https:// ou incorpore a imagem como um URI data:.

Sim. Cole o documento inteiro (doctype, <head>, <body> e tudo) e ele é renderizado como está. Um fragmento solto também funciona; o navegador completa o resto.

Esta ferramenta renderiza o HTML que você cola como texto; ela nunca busca uma URL. Você controla exatamente o que é renderizado, o que é útil para modelos de e-mail, fragmentos extraídos e depuração rápida.

Ferramentas relacionadas

Referência da Tabela ASCII

Tabela ASCII completa de 0 a 127 com valores decimais, hexadecimais, octais e binários e notação de referência numérica HTML, incluindo NUL, LF e DEL.

Referência de Caracteres HTML

Lista pesquisável de entidades HTML, seus códigos nomeados e numéricos, e uma cópia com um clique para caracteres e símbolos especiais.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Referência de atalhos de teclado

Pesquise atalhos padrão documentados do VS Code, Chrome e Bash com GNU Readline no macOS, Windows e Linux.

Gerador de EditorConfig

Monte um .editorconfig com as suas regras de indentação, fim de linha e charset e acrescente a seção correta para cada linguagem do seu repositório: Python, Go, YAML, Makefile e mais.

Validador de Email

Valide um endereço de email: verificação de sintaxe RFC 5322, consulta de registro MX em tempo real, além de detalhes de parte local, domínio e comprimento. Nenhum email é enviado.

Ferramenta disponível em outros idiomas