Apri file HTML online - Viewer HTML, editor e anteprima live

Apri e visualizza file HTML online gratis. Modifica HTML con anteprima live in tempo reale, formatta il codice e testa pagine web in sicurezza nel browser.

Visualizzatore HTML

1493

Editor

Codice

<!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>Ciao Mondo!</h1>
        <p>Questa è un'anteprima dal vivo del tuo codice HTML.</p>
        <button onclick="alert('Funziona!')">Cliccami</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>Ciao Mondo!</h1>
        <p>Questa è un'anteprima dal vivo del tuo codice HTML.</p>
        <button onclick="alert('Funziona!')">Cliccami</button>
    </div>
</body>
</html>

Anteprima

Anteprima dal vivo

Potrebbe servirti anche

Da HTML a JSON

Converti la struttura HTML in un albero JSON.

Apri strumento

Minificatore HTML

Minifica o formatta il testo HTML con rientro di 2/4 spazi.

Apri strumento

Visualizzatore Markdown

Anteprima e modifica Markdown con visualizzazione live.

Apri strumento

Visualizzatore XML online

Apri, visualizza e formatta file XML online con vista ad albero e validazione.

Apri strumento

Come usare il Visualizzatore HTML?

Digita o incolla il tuo codice HTML nel riquadro dell'editor.

Il riquadro di anteprima si aggiornerà automaticamente per mostrare il risultato renderizado.

Usa i pulsanti della barra degli strumenti per Copiare, Cancellare o Passare a Schermo Intero.

Caratteristiche Principali

Anteprima in Tempo Reale

Vedi istantaneamente come viene renderizzato il tuo codice HTML mentre digiti.

Privacy Garantita

Il tuo codice non lascia mai il tuo browser. Tutta l'elaborazione avviene localmente.

Design Responsivo

Usa la vista divisa o passa a schermo intero per una migliore esperienza di modifica.

Domande Frequenti

Come apro un file HTML online e ne vedo l’anteprima?

Incolla codice HTML o carica un file e l’anteprima renderizzata si aggiorna subito. Questo rende più facile controllare rapidamente l’HTML e fare debug.

Posso testare CSS e JavaScript esterni in questo viewer HTML?

Sì. Le risorse esterne standard possono caricarsi nell’anteprima quando consentito dalle policy di sicurezza del browser.