HTML-Viewer

HTML schreiben oder einfügen und sofort das gerenderte Ergebnis im Browser sehen.

Layout:Skripte sind sandboxed und können nicht ausgeführt werden.

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>

Vorschau

Über dieses Tool

Der HTML-Viewer ermöglicht das Schreiben oder Einfügen von HTML-Code und zeigt sofort das gerenderte Ergebnis im Browser an. Die Vorschau wird in einem sandboxed iframe mit deaktivierten Skripten angezeigt, sodass HTML aus nicht vertrauenswürdigen Quellen sicher angezeigt werden kann.

Unterstützt vollständige HTML-Dokumente (mit head, Inline-CSS und style-Blöcken) sowie HTML-Fragmente. Die gesamte Verarbeitung erfolgt lokal im Browser.

Anleitung

Tippen oder fügen Sie Ihr HTML in den Code-Editor auf der linken Seite ein.
Klicken Sie auf Rendern, um die Vorschau zu aktualisieren.
Wechseln Sie zum gestapelten Layout für einen größeren Vorschaubereich.
Verwenden Sie Tab, um Zeilen im Editor einzurücken.

Anwendungsfälle

Frontend-Entwickler testen HTML-Snippets schnell. E-Mail-Entwickler zeigen HTML-E-Mail-Vorlagen an. HTML-Lernende experimentieren mit Tags und sehen sofort Ergebnisse. Code-Reviewer überprüfen die gerenderte Ausgabe visuell.

Häufige Fragen

Warum sind Skripte deaktiviert? — Der Vorschau-iframe verwendet sandbox="allow-same-origin", um die JavaScript-Ausführung zu blockieren, sodass HTML aus unbekannten Quellen sicher angezeigt werden kann.
Kann ich CSS in der Vorschau sehen? — Ja. Fügen Sie style-Tags in Ihr HTML ein oder verwenden Sie Inline-Styles. Externe Stylesheets von anderen Ursprüngen können durch CSP blockiert werden.
Werden vollständige HTML-Dokumente unterstützt? — Ja. Sie können ein vollständiges HTML-Dokument einschließlich DOCTYPE, head und body einfügen.