devpack
EnglishDeutschFrançaisEspañolPortuguês (Brasil)
Auditoria do site

Visualizador HTML Online e Pré-visualização ao Vivo

Cole o HTML (e o CSS ou JavaScript, se tiver) para ver como ele fica renderizado — na hora, em um quadro isolado, com visualização em tela cheia.

Atualizado em
Modelo
Console

Seu código é salvo automaticamente neste navegador. A pré-visualização roda em um frame com sandbox, sem acesso a este site.

Seus dados nunca saem do seu computador. Todo o processamento acontece localmente no navegador.

Como usar: Visualizador HTML

  1. Cole seu HTML na caixa HTML (as caixas de CSS e JavaScript são opcionais).
  2. A pré-visualização é atualizada enquanto você digita; clique em Tela cheia na pré-visualização para ver a página em tamanho real.
  3. Use Formatar para organizar o código ou Baixar .html para salvar a página.

Pré-visualize HTML sem salvar um arquivo

Conferir um trecho de um CMS, um template de e-mail ou uma resposta do Stack Overflow geralmente significa salvar um arquivo .html e abri-lo no navegador. Aqui você cola e vê o resultado na hora. A pré-visualização roda em um quadro isolado, então os scripts do trecho não conseguem acessar este site nem os seus dados.

E-mails HTML e embeds do Webflow

Cole um template de e-mail para conferir o layout antes de enviar, ou um Code Embed do Webflow para vê-lo fora do Designer. Estilos que não aparecem geralmente significam que o CSS está em um arquivo separado — cole-o na caixa de CSS. Para transformar um layout em elementos do Webflow, use o HTML/CSS para Webflow.

Também pesquisado como: pré-visualizar html, visualizador html online, preview html online, preview css, preview html css, renderizar html, ver código html, visualizador de arquivo html.

Ferramentas que combinam com: Visualizador HTML

  • Editor HTML Online — Um playground de código leve: edite HTML, CSS e JavaScript lado a lado, veja o resultado na hora, leia a saída do console e baixe sua página como um único arquivo HTML.
  • Formatador HTML — Cole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os blocos <style> e <script> embutidos.
  • HTML para Markdown — Cole o HTML — ou copie texto formatado direto de uma página web, Google Doc ou e-mail — e receba um Markdown organizado para usar em um README, wiki ou site estático.
  • Formatador de CSS — Transforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media aninhados corretamente.

Perguntas frequentes

Como pré-visualizar um arquivo HTML?
Abra o arquivo em um editor de texto, copie todo o conteúdo e cole na caixa de HTML. Folhas de estilo e imagens vinculadas são carregadas se as URLs forem absolutas (https://…).
O HTML que eu colo é enviado para algum servidor?
Não. A pré-visualização é renderizada no seu navegador, em um quadro isolado, e o código fica salvo apenas neste dispositivo.
Posso ver a pré-visualização em tela cheia?
Sim. Clique em Tela cheia na pré-visualização; pressione Esc para voltar.
Posso instalar o Visualizador HTML como um aplicativo da web e usá-lo offline?
Sim. O Visualizador HTML é um aplicativo da web instalável (PWA) — instalado a partir do seu navegador, não baixado de uma loja de aplicativos. Clique em “Instalar aplicativo” na parte superior desta página no Chrome ou no Edge (Windows, macOS, Linux, ChromeOS) ou, no Android, use “Compartilhar” → “Adicionar à tela inicial” no iPhone e no iPad, ou “Arquivo” → “Adicionar ao Dock” no Safari 17+ em um Mac. Em seguida, ela se abre em uma janela própria com seu próprio ícone e, como é executada inteiramente no seu navegador, continua funcionando offline. O Firefox no desktop não permite a instalação de aplicativos da web. Como funciona a instalação.

Ferramentas relacionadas

localEditor HTML OnlineUm playground de código leve: edite HTML, CSS e JavaScript lado a lado, veja o resultado na hora, leia a…localFormatador HTMLCole HTML minificado ou bagunçado e receba um código limpo e com indentação consistente, incluindo os…localHTML para MarkdownCole o HTML — ou copie texto formatado direto de uma página web, Google Doc ou e-mail — e receba um…localHTML e CSS para WebflowCole o HTML e o CSS, clique em Copy to Webflow e cole no Designer — você recebe Div Blocks, Headings,…localFormatador de CSSTransforme uma folha de estilo minificada em CSS legível, com uma propriedade por linha e blocos @media…localFormatador JavaScriptDesminifique e deixe legível JavaScript, JSON ou JSX com a indentação e o estilo de chaves que você…