Öppna HTML-fil online - HTML-visare, editor och liveförhandsvisning

Öppna och förhandsgranska HTML-filer online gratis. Redigera HTML med liveförhandsvisning i realtid, formatera kod och testa webbsidor säkert i din webbläsare.

HTML-visare

1501

Redigerare

Kod

<!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>Hej Världen!</h1>
        <p>Detta är en live-förhandsvisning av din HTML-kod.</p>
        <button onclick="alert('Det fungerar!')">Klicka på mig</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>Hej Världen!</h1>
        <p>Detta är en live-förhandsvisning av din HTML-kod.</p>
        <button onclick="alert('Det fungerar!')">Klicka på mig</button>
    </div>
</body>
</html>

Förhandsvisning

Live-förhandsvisning

Du kanske också behöver

HTML till JSON

Konvertera HTML-struktur till JSON-träd.

Öppna verktyget

HTML-minifierare/formaterare

Minifiera eller formatera HTML-text med 2/4 mellanslags indrag.

Öppna verktyget

Markdown-visare

Förhandsgranska och redigera Markdown med live-visualisering.

Öppna verktyget

XML-visare online

Oppna, visa och formatera XML-filer online med tradvy och validering.

Öppna verktyget

Hur använder man HTML-visaren?

Skriv eller klistra in din HTML-kod i redigeringspanelen.

Förhandsgranskningspanelen uppdateras automatiskt för att visa det renderade resultatet.

Använd verktygsfältsknapparna för att Kopiera, Rensa eller Växla till Helskärm.

Huvudfunktioner

Realtidsförhandsvisning

Se direkt hur din HTML-kod renderas medan du skriver.

Integritet först

Din kod lämnar aldrig din webbläsare. All bearbetning sker lokalt.

Responsiv Design

Använd delad vy eller gå till helskärm för en bättre redigeringsupplevelse.

Vanliga Frågor

Hur öppnar jag en HTML-fil online och förhandsgranskar den?

Klistra in HTML-kod eller ladda en fil, så uppdateras den renderade förhandsvisningen direkt. Det gör snabba HTML-kontroller och felsökning enklare.

Kan jag testa extern CSS och JavaScript i den här HTML-visaren?

Ja. Standard externa resurser kan laddas i förhandsvisningen om webbläsarens säkerhetspolicy tillåter det.