HTML-bestand online openen - HTML-viewer, editor en live preview

Open en bekijk HTML-bestanden online gratis. Bewerk HTML met realtime live preview, formatteer code en test webpagina’s veilig in je browser.

HTML Viewer

1489

Editor

Code

<!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>Hallo Wereld!</h1>
        <p>Dit is een live voorbeeld van uw HTML-code.</p>
        <button onclick="alert('Het werkt!')">Klik hier</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>Hallo Wereld!</h1>
        <p>Dit is een live voorbeeld van uw HTML-code.</p>
        <button onclick="alert('Het werkt!')">Klik hier</button>
    </div>
</body>
</html>

Voorbeeld

Live voorbeeld

Misschien heb je dit ook nodig

HTML naar JSON

Zet HTML-structuur om in een JSON-boom.

Tool openen

HTML-minifier/-formatter

Minimaliseer of formatteer HTML-tekst met 2/4 spaties inspringing.

Tool openen

Markdown-viewer

Bekijk en bewerk Markdown met live visualisatie.

Tool openen

XML-viewer online

Open, bekijk en formatteer XML-bestanden online met boomweergave en validatie.

Tool openen

Hoe gebruikt u de HTML Viewer?

Typ of plak uw HTML-code in het editorvenster.

Het voorbeeldvenster wordt automatisch bijgewerkt om het gerenderde resultaat te tonen.

Gebruik de werkbalkknoppen om te Kopiëren, Wissen of Volledig Scherm te wisselen.

Belangrijkste Kenmerken

Realtime Voorbeeld

Zie direct hoe uw HTML-code wordt gerenderd terwijl u typt.

Privacy Gegarandeerd

Uw code verlaat nooit uw browser. Alle verwerking gebeurt lokaal.

Responsief Ontwerp

Gebruik de gesplitste weergave of ga naar volledig scherm voor een betere bewerkingservaring.

Veelgestelde Vragen

Hoe open ik een HTML-bestand online en bekijk ik een preview?

Plak HTML-code of laad een bestand en de gerenderde preview wordt direct bijgewerkt. Dit maakt snelle HTML-checks en debuggen makkelijker.

Kan ik externe CSS en JavaScript testen in deze HTML-viewer?

Ja. Standaard externe resources kunnen in de preview laden als het browserbeveiligingsbeleid dit toestaat.