Was ist der HTML-Viewer?

Möchten Sie sehen, wie Ihr HTML aussieht, ohne einen Server zu starten? Genau das macht dieses Tool. Der HTML-Viewer nimmt Ihren HTML (HyperText Markup Language)-Code und rendert ihn live in einem Vorschau-Panel neben Ihrem Code.

Ob Sie eine Landingpage prototypen, eine E-Mail-Vorlage debuggen oder einfach Ihr Markup überprüfen — dieses Tool gibt Ihnen sofortiges visuelles Feedback. Keine Dateien speichern, keinen lokalen Server starten.

Alles läuft in Ihrem Browser. Ihr HTML berührt niemals unsere Server. Schnell, kostenlos und privat.

So verwenden Sie den HTML-Viewer

Folgen Sie diesen Schritten, um Ihr HTML in der Vorschau zu betrachten und damit zu arbeiten.

HTML einfügen oder Beispiel laden

Fügen Sie Ihr HTML in den linken Editor ein. Es kann eine vollständige Seite mit <html>-, <head>- und <body>-Tags oder nur ein Snippet sein. Klicken Sie auf Beispiel, um Demo-HTML zu laden.

<div style="font-family: Arial, sans-serif; padding: 20px;">
  <h1 style="color: #333;">Hallo Welt</h1>
  <p>Dies ist eine <strong>Beispiel-HTML-Seite</strong>.</p>
  <ul>
    <li>Element 1</li>
    <li>Element 2</li>
    <li>Element 3</li>
  </ul>
</div>

Die Vorschau aktualisiert sich automatisch beim Tippen.

Live-Vorschau ansehen

Das rechte Panel rendert Ihr HTML sofort. Sie sehen genau, wie der Browser Ihr Markup interpretiert — Stile, Layout, Bilder und alles andere.

Anpassen und Iterieren

Bearbeiten Sie Ihr HTML im linken Panel und beobachten Sie, wie sich die Vorschau in Echtzeit aktualisiert. Ziehen Sie den Teiler, um die Panel-Größen anzupassen.

Arbeit teilen

Klicken Sie auf Teilen, um einen teilbaren Link für Ihr HTML zu generieren.

Wann Sie dies verwenden würden

UI-Snippet-Prototyping

Möchten Sie schnell einen Button-Stil, ein Card-Layout oder eine Navigationsleiste testen? Fügen Sie Ihr HTML hier ein und sehen Sie es sofort gerendert.

E-Mail-Template-Debugging

E-Mail-HTML ist bekanntermaßen knifflig — Inline-Stile, Tabellen-Layouts, eigenartiges Rendering. Fügen Sie Ihre Vorlage hier ein, um zu sehen, wie sie aussieht.

HTML lernen

Wenn Sie HTML lernen, ist dieses Tool perfekt zum Experimentieren. Schreiben Sie Tags, sehen Sie was sie bewirken. Probieren Sie verschiedene Attribute aus, überprüfen Sie das Ergebnis sofort.

Code-Snippets überprüfen

Jemand hat Ihnen ein HTML-Snippet auf Slack oder in einem PR-Kommentar geschickt? Fügen Sie es hier ein, um zu sehen, wie es tatsächlich aussieht.

Häufig gestellte Fragen

Werden meine HTML-Daten gespeichert?

Nein. Alles läuft vollständig in Ihrem Browser mit JavaScript. Ihr HTML verlässt Ihren Computer nur, wenn Sie auf "Teilen" klicken.

Unterstützt es CSS und JavaScript?

Ja. Inline-Stile und <style>-Tags werden korrekt gerendert. JavaScript in <script>-Tags wird im isolierten Vorschau-iframe ausgeführt.

Ist die Vorschau sicher?

Die Vorschau rendert in einem isolierten iframe, der von der Hauptseite getrennt ist.

Kann ich vollständige HTML-Dokumente verwenden?

Absolut. Sie können ein vollständiges HTML-Dokument mit <!DOCTYPE html>, <html>, <head> und <body> oder nur ein Fragment einfügen.

Wie funktioniert die Live-Vorschau?

Während Sie im Editor tippen, aktualisiert das Tool den Vorschau-iframe mit Ihrem HTML-Inhalt nach einer kurzen Verzögerung von 300ms.

Kann ich die Panel-Größen ändern?

Ja. Ziehen Sie die Trennleiste zwischen den zwei Panels, um ihre Größen anzupassen. Auf Mobilgeräten stapeln sich die Panels vertikal.

Weitere HTML- & Markup-Tools

Dieser Viewer ist ideal für die HTML-Vorschau, aber manchmal brauchen Sie andere Dinge: