Abrir archivo HTML online - Visor HTML, editor y vista previa en vivo

Abre y previsualiza archivos HTML online gratis. Edita HTML con vista previa en tiempo real, formatea código y prueba páginas web de forma segura en tu navegador.

Visor HTML

1500

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>¡Hola Mundo!</h1>
        <p>Esta es una vista previa en vivo de tu código HTML.</p>
        <button onclick="alert('¡Funciona!')">Haz clic aquí</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>¡Hola Mundo!</h1>
        <p>Esta es una vista previa en vivo de tu código HTML.</p>
        <button onclick="alert('¡Funciona!')">Haz clic aquí</button>
    </div>
</body>
</html>

Vista previa

Vista previa en vivo

¿Cómo usar el Visor HTML?

Escribe o pega tu código HTML en el panel del editor.

El panel de vista previa se actualizará automáticamente para mostrar el resultado renderizado.

Usa los botones de la barra de herramientas para Copiar, Limpiar o Alternar Pantalla Completa.

Características Principales

Previsualización en Tiempo Real

Mira instantáneamente cómo se renderiza tu código HTML mientras escribes.

Privacidad Garantizada

Tu código nunca sale de tu navegador. Todo el procesamiento se realiza localmente.

Diseño Responsivo

Usa la vista dividida o ve a pantalla completa para una mejor experiencia de edición.

Preguntas Frecuentes

¿Cómo abro un archivo HTML online y lo previsualizo?

Pega código HTML o carga un archivo y la vista previa renderizada se actualiza al instante. Esto facilita comprobaciones rápidas de HTML y depuración.

¿Puedo probar CSS y JavaScript externos en este visor HTML?

Sí. Los recursos externos estándar pueden cargarse en la vista previa cuando las políticas de seguridad del navegador lo permiten.

Abrir archivo HTML online - Visor HTML, editor y vista previa en vivo

Visor HTML

También te puede interesar

HTML a JSON

Minificador/Formateador HTML

Visor Markdown

Visor XML online