Como abrir um arquivo HTML online?

Abra o .html em um editor de texto simples, copie o código-fonte e cole no editor desta página. A prévia renderiza a página na hora — nada é enviado para servidor e não há nada para instalar.

Com o que abrir um arquivo .html?

Clicar duas vezes abre a página renderizada no navegador; abrir com o Bloco de Notas ou um editor de código mostra o código-fonte. Este visualizador entrega os dois ao mesmo tempo: código à esquerda, página renderizada à direita.

Arquivos .htm e .mhtml funcionam?

Um .htm é a mesma coisa que .html, então o código cola sem problema. Já o .mhtml é um pacote da página com todos os recursos dentro, e o conteúdo bruto dele não renderiza aqui — salve a página como HTML comum primeiro.

Como abrir um arquivo HTML no iPhone?

Esta página funciona no Safari e no Chrome do iPhone, com editor e prévia empilhados. Para um arquivo guardado no aparelho, abra o app Arquivos, toque e mantenha o .html, escolha Compartilhar ou abra-o em um editor de texto e copie o código para cá. No Android o caminho é o mesmo pelo gerenciador de arquivos.

Como converter HTML em PDF?

Aqui não há conversão: a ferramenta só renderiza e edita HTML. Quando a prévia estiver do jeito certo, cole o código em um arquivo .html local, abra no navegador e use Imprimir escolhendo Salvar como PDF no destino.

CSS, JavaScript e imagens externos carregam na prévia? É seguro?

URLs https absolutas carregam normalmente, incluindo CSS, scripts e imagens de CDN. Caminhos relativos como ./style.css não resolvem, porque a prévia não tem pasta própria. O quadro roda em sandbox com scripts liberados mas sem acesso à mesma origem, então cookies, armazenamento e caixas de alerta ficam bloqueados.

Posso salvar ou baixar o resultado?

Não existe botão de download. Use Copiar, cole o markup em um arquivo .html no seu computador e salve por lá — de todo modo, o código nunca sai do seu navegador.

Visualizador HTML

Cole seu HTML e veja a página renderizada na hora, ao lado do editor. Prévia ao vivo, sem upload e sem instalar nada: tudo roda local no navegador, grátis.

Para abrir um arquivo HTML online, copie o código-fonte do seu .html e cole no editor à esquerda — o painel da direita renderiza a página na hora. Você recebe prévia ao vivo, um editor HTML com destaque de sintaxe, cópia em um clique e modo tela cheia. Tudo roda dentro do navegador em um iframe isolado, então nada é enviado para servidor.

Visualizador HTML

1499

Editor

Código

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Olá Mundo!</h1>
        <p>Esta é uma pré-visualização ao vivo do seu código HTML.</p>
        <button onclick="alert('Funciona!')">Clique aqui</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .card {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            padding: 2rem;
            border-radius: 1rem;
            box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
            border: 1px solid rgba(255, 255, 255, 0.18);
            text-align: center;
            max-width: 400px;
        }
        h1 { margin-top: 0; }
        button {
            background: white;
            color: #764ba2;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: 2rem;
            font-weight: bold;
            cursor: pointer;
            transition: transform 0.2s;
        }
        button:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body>
    <div class="card">
        <h1>Olá Mundo!</h1>
        <p>Esta é uma pré-visualização ao vivo do seu código HTML.</p>
        <button onclick="alert('Funciona!')">Clique aqui</button>
    </div>
</body>
</html>

Pré-visualização

Pré-visualização ao vivo

Talvez você também precise

HTML para JSON

Converter estrutura HTML em árvore JSON.

Abrir ferramenta

Minificador/Formatador HTML

Minifique ou formate texto HTML com indentação de 2/4 espaços.

Abrir ferramenta

Visualizador Markdown

Visualize e edite Markdown com visualização ao vivo.

Abrir ferramenta

Visualizador XML online

Abra, visualize e formate arquivos XML online com visualizacao em arvore e validacao.

Abrir ferramenta

Como usar o visualizador HTML

1
Copie o código-fonte
Abra o arquivo .html com um editor de texto simples — Bloco de Notas no Windows, TextEdit no macOS ou qualquer editor de código — e copie todo o conteúdo.
2
Cole no editor
Coloque o código no painel da esquerda. Você também pode clicar em Exemplo para carregar uma página de demonstração e partir dela.
3
Veja a prévia ao vivo
O painel da direita renderiza o markup cerca de meio segundo depois de você parar de digitar, exatamente como um navegador faria.
4
Edite, copie, tela cheia
Ajuste o código e acompanhe o resultado mudar, use Copiar para levar o HTML para o seu projeto ou Tela cheia para uma área maior (saia com Esc).

Referências

MDN — HTML
Referência e tutoriais de todos os elementos e atributos HTML, em português.
WHATWG — HTML Standard
A especificação viva que define a sintaxe do HTML e como os navegadores renderizam (em inglês).
MDN — elemento iframe e atributo sandbox
Explica as restrições de sandbox aplicadas ao quadro de prévia.

Ferramentas relacionadas

Minificador HTML

Remova espaços e comentários para reduzir o tamanho do HTML.

HTML para JSON

Transforme markup HTML em uma árvore JSON estruturada.

Visualizador Markdown

Pré-visualize Markdown renderizado como HTML em tempo real.

Minificador CSS

Comprima as folhas de estilo que você cola na página.

Minificador JS

Comprima os scripts que você cola na página.

Perguntas frequentes

Como abrir um arquivo HTML online?: Abra o .html em um editor de texto simples, copie o código-fonte e cole no editor desta página. A prévia renderiza a página na hora — nada é enviado para servidor e não há nada para instalar.
Com o que abrir um arquivo .html?: Clicar duas vezes abre a página renderizada no navegador; abrir com o Bloco de Notas ou um editor de código mostra o código-fonte. Este visualizador entrega os dois ao mesmo tempo: código à esquerda, página renderizada à direita.
Arquivos .htm e .mhtml funcionam?: Um .htm é a mesma coisa que .html, então o código cola sem problema. Já o .mhtml é um pacote da página com todos os recursos dentro, e o conteúdo bruto dele não renderiza aqui — salve a página como HTML comum primeiro.
Como abrir um arquivo HTML no iPhone?: Esta página funciona no Safari e no Chrome do iPhone, com editor e prévia empilhados. Para um arquivo guardado no aparelho, abra o app Arquivos, toque e mantenha o .html, escolha Compartilhar ou abra-o em um editor de texto e copie o código para cá. No Android o caminho é o mesmo pelo gerenciador de arquivos.
Como converter HTML em PDF?: Aqui não há conversão: a ferramenta só renderiza e edita HTML. Quando a prévia estiver do jeito certo, cole o código em um arquivo .html local, abra no navegador e use Imprimir escolhendo Salvar como PDF no destino.
CSS, JavaScript e imagens externos carregam na prévia? É seguro?: URLs https absolutas carregam normalmente, incluindo CSS, scripts e imagens de CDN. Caminhos relativos como ./style.css não resolvem, porque a prévia não tem pasta própria. O quadro roda em sandbox com scripts liberados mas sem acesso à mesma origem, então cookies, armazenamento e caixas de alerta ficam bloqueados.
Posso salvar ou baixar o resultado?: Não existe botão de download. Use Copiar, cole o markup em um arquivo .html no seu computador e salve por lá — de todo modo, o código nunca sai do seu navegador.