HTML-viewer

Schrijf of plak HTML en zie het gerenderde resultaat direct in de browser.

Indeling:Scripts zijn gesandboxed en kunnen niet worden uitgevoerd.

HTML-code

<!DOCTYPE html>
<html>
<head>
  <style>
    body { font-family: sans-serif; padding: 16px; color: #1e293b; }
    h1 { color: #3b82f6; }
    button { background: #3b82f6; color: white; border: none; padding: 8px 16px; border-radius: 6px; cursor: pointer; }
    button:hover { background: #2563eb; }
  </style>
</head>
<body>
  <h1>HTML Viewer</h1>
  <p>Edit the HTML on the left to see it rendered here.</p>
  <button>Click me</button>
</body>
</html>

Voorbeeld

Over deze tool

De HTML-viewer laat u HTML-code schrijven of plakken en onmiddellijk zien hoe het in een browser wordt weergegeven. De preview wordt getoond in een gesandboxed iframe met scripts uitgeschakeld, zodat u HTML van niet-vertrouwde bronnen veilig kunt bekijken.

Het ondersteunt volledige HTML-documenten (met head, inline CSS en style-blokken) en HTML-fragmenten. Alle verwerking vindt lokaal in uw browser plaats.

Hoe te gebruiken

Typ of plak uw HTML in de code-editor aan de linkerkant.
Klik op Renderen om de preview bij te werken.
Schakel over naar Gestapeld-indeling voor een hogere preview-ruimte.
Gebruik Tab om regels in de editor in te laten springen.

Gebruiksscenario's

Frontend-ontwikkelaars testen HTML-fragmenten snel. E-mailopntwikkelaars bekijken HTML-e-mailsjablonen. Studenten die HTML leren experimenteren met tags en zien resultaten direct. Code-reviewers verifiëren de gerenderde uitvoer visueel.

Veelgestelde vragen

Waarom zijn scripts uitgeschakeld? — Het preview-iframe gebruikt sandbox="allow-same-origin" om JavaScript-uitvoering te blokkeren — HTML van onbekende bronnen kan veilig worden bekeken.
Kan ik CSS bekijken? — Ja. Voeg style-tags toe aan uw HTML of gebruik inline stijlen. Externe stijlbladen van andere origins kunnen door CSP worden geblokkeerd.
Worden volledige HTML-documenten ondersteund? — Ja. U kunt een compleet HTML-document plakken inclusief DOCTYPE, head en body.