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

Plak HTML-code of laad een bestand in de editor en het gerenderde voorbeeld wordt direct bijgewerkt. Geen software nodig—alles werkt in de browser.

Kan ik de HTML-viewer ook op iPhone of mobiel gebruiken?

Ja. Deze viewer werkt in elke browser—iPhone, Android, desktop—zonder app te downloaden. Open de pagina en begin direct.

Kan ik externe CSS en JavaScript testen?

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

Wordt mijn HTML-code naar een server verzonden?

Nee. Alle rendering vindt lokaal in uw browser plaats. Uw code verlaat uw apparaat nooit.

Wordt het voorbeeld automatisch bijgewerkt tijdens het bewerken?

Ja. De viewer re-rendert het voorbeeldvenster in realtime bij elke wijziging, zonder dat u op een verversknop hoeft te klikken.

Kan ik HTML-code bewerken en kopiëren?

Ja. Bewerk uw markup in het editorvenster en gebruik de kopieknop in de werkbalk om de voltooide HTML te kopiëren.

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

Open en bekijk HTML-bestanden online met realtime live preview. Bewerk en formatteer de code en test webpagina's veilig in je browser. Gratis.

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.

Plak HTML-code of open een bestand in deze online HTML-viewer, en het gerenderde voorbeeld verschijnt direct naast de editor—zonder uploaden, zonder installeren. Bewerk markup in de browser, volg de live uitvoer en laad externe CSS en JavaScript om volledige webpagina's te testen. Alle verwerking is lokaal, uw code verlaat uw apparaat nooit.

HTML-viewer gebruiken

1
Plak of typ uw HTML
Typ uw markup in het editorvenster of plak de inhoud van een bestaand HTML-bestand er direct in.
2
Bekijk het live voorbeeld
Het voorbeeldvenster rendert uw HTML automatisch bij elke wijziging en toont precies hoe de pagina er in een browser uitziet.
3
Test CSS en JavaScript
Voeg inline of externe <style>- en <script>-tags toe om stijlen en interactief gedrag in dezelfde weergave te testen.
4
Kopieer, wis of ga naar volledig scherm
Gebruik de werkbalk om code te kopiëren, de editor te wissen of over te schakelen naar volledig scherm voor meer werkruimte.

Referenties

WHATWG — HTML Standard
De levende specificatie die HTML-syntaxis, elementen en renderinggedrag in moderne browsers definieert.
MDN — HTML
Uitgebreide referentie en tutorials voor HTML-elementen, attributen en beste praktijken.

Gerelateerde tools

HTML Minifier

Verwijder witruimte en opmerkingen om HTML te verkleinen voor productie.

HTML naar JSON

Converteer HTML-opmaak naar een gestructureerde JSON-representatie.

Markdown Viewer

Bekijk Markdown als HTML-weergave in realtime.

CSS Minifier

Comprimeer stylesheets die u gebruikt voor uw HTML-voorbeeld.

Veelgestelde vragen

Hoe open ik een HTML-bestand online en bekijk ik een preview?: Plak HTML-code of laad een bestand in de editor en het gerenderde voorbeeld wordt direct bijgewerkt. Geen software nodig—alles werkt in de browser.
Kan ik de HTML-viewer ook op iPhone of mobiel gebruiken?: Ja. Deze viewer werkt in elke browser—iPhone, Android, desktop—zonder app te downloaden. Open de pagina en begin direct.
Kan ik externe CSS en JavaScript testen?: Ja. Standaard externe resources kunnen in het voorbeeld laden als het browserbeveiligingsbeleid dit toestaat.
Wordt mijn HTML-code naar een server verzonden?: Nee. Alle rendering vindt lokaal in uw browser plaats. Uw code verlaat uw apparaat nooit.
Wordt het voorbeeld automatisch bijgewerkt tijdens het bewerken?: Ja. De viewer re-rendert het voorbeeldvenster in realtime bij elke wijziging, zonder dat u op een verversknop hoeft te klikken.
Kan ik HTML-code bewerken en kopiëren?: Ja. Bewerk uw markup in het editorvenster en gebruik de kopieknop in de werkbalk om de voltooide HTML te kopiëren.