Abrir arquivo HTML online - Visualizador HTML, editor e pré-visualização ao vivo

Abra e visualize arquivos HTML online grátis. Edite HTML com pré-visualização ao vivo em tempo real, formate código e teste páginas web com segurança no navegador.

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?

Digite ou cole seu código HTML no painel do editor.

O painel de pré-visualização será atualizado automaticamente para mostrar o resultado renderizado.

Use os botões da barra de ferramentas para Copiar, Limpar ou Alternar Tela Cheia.

Principais Recursos

Pré-visualização em Tempo Real

Veja instantaneamente como seu código HTML é renderizado enquanto você digita.

Privacidade em Primeiro Lugar

Seu código nunca sai do seu navegador. Todo o processamento é feito localmente.

Design Responsivo

Use a visualização dividida ou vá para tela cheia para uma melhor experiência de edição.

Perguntas Frequentes

Como abrir um arquivo HTML online e visualizar?

Cole código HTML ou carregue um arquivo, e a pré-visualização renderizada é atualizada instantaneamente. Isso facilita checagens rápidas de HTML e debug.

Posso testar CSS e JavaScript externos neste visualizador HTML?

Sim. Recursos externos padrão podem carregar na pré-visualização quando as políticas de segurança do navegador permitirem.