Softonic

Gerendertes-HTML-Viewer

Schritt 1 / 2
Weiter

Fügen Sie beliebiges HTML ein (eine E-Mail-Vorlage, ein aus einer Seite herausgelöstes Fragment, ein Beispiel aus der Dokumentation) und klicken Sie auf Rendern, um es in einem abgeschotteten iframe gezeichnet zu sehen. Der Rahmen läuft mit der strengsten Sandbox des Browsers: Skripte werden nicht ausgeführt, Formulare können nichts absenden und das Markup kann weder navigieren noch die umgebende Seite berühren. Es ist der schnellste Weg, die Frage “wie sieht dieses Markup tatsächlich aus” zu beantworten, ohne einen Staging-Server aufzusetzen.

So schauen Sie HTML vor

  1. 1

    HTML einfügen

    Legen Sie ein vollständiges Dokument oder ein loses Fragment in das Quellfeld. Was Sie einfügen, wird genau so gerendert, wie es geschrieben ist.

  2. 2

    Auf Rendern klicken

    Der Viewer schreibt Ihr HTML in einen abgeschotteten iframe und zeigt das Ergebnis direkt auf der Seite.

  3. 3

    Vorschau lesen

    Der Rahmen zeichnet Ihr Markup so, wie es ein Browser tun würde: Überschriften, Tabellen, Listen, Inline-Stile und SVG erscheinen alle.

  4. 4

    Anpassen und erneut rendern

    Bearbeiten Sie die Quelle und rendern Sie so oft Sie möchten, um zu vergleichen, wie jede Version aussieht.

Warum der Rahmen abgeschottet ist

Eingefügtes HTML kann alles enthalten: <script>-Tags, einen <img onerror="...">-Trick, ein Formular, das Daten irgendwohin sendet, oder ein <iframe>, das eine andere Website lädt. Damit nichts davon die Seite berührt, wird die Vorschau in ein <iframe sandbox> mit einem leeren sandbox-Attribut geschrieben, der restriktivsten Einstellung überhaupt. In diesem Modus blockiert der Browser gleichzeitig die Skriptausführung, das Absenden von Formularen, Pop-ups, die Navigation auf oberster Ebene und den Zugriff auf denselben Ursprung. Sie sehen das visuelle Ergebnis, ohne dem Markup irgendeine Macht zu geben.

Weil Skripte niemals laufen, zeigt alles, was von JavaScript abhängt (eine Web Component, die beim Laden hydratisiert, ein Diagramm, das sich selbst zeichnet, ein Framework, das sich in ein leeres <div> einhängt), nur sein statisches Markup, nicht sein skriptgesteuertes Ergebnis. Das ist ein bewusster Kompromiss: eine sichere, vorhersehbare Vorschau statt einer interaktiven.

Was der Viewer gut rendert

Inhaltstyp Hinweise
E-Mail-HTML Tabellenbasierte Layouts und Inline-Stile werden so gezeichnet, wie die meisten Clients sie darstellen
Blogbeitragstext Überschriften, Listen, Zitate und Bilder erscheinen ganz ohne Skripting
Herausgelöstes Fragment Zeigt, ob das erfasste Markup vollständig genug ist, um für sich allein zu stehen
Inline-SVG Zeichnet in jeder Größe, praktisch zum Prüfen eines Symbols
Statisches Komponenten-Markup Das Markup wird gerendert; das Verhalten in JavaScript nicht

Gute Einsatzzwecke für dieses Werkzeug

  • QA von E-Mail-Vorlagen. Fügen Sie den Export aus Ihrem E-Mail-Editor ein und betrachten Sie das Layout, ohne sich eine Testnachricht zu schicken.
  • Schnelle Prüfung herausgelöster Daten. Sie haben etwas innerHTML von einer Seite erfasst: Rendert es sich zu etwas Sinnvollem zurück? Falls nicht, ist das Fragment wahrscheinlich unvollständig.
  • Markdown-zu-HTML-Prüfung. Lassen Sie Text durch einen Konverter laufen (das Werkzeug HTML zu Markdown macht den Hin- und Rückweg) und schauen Sie hier das entstehende HTML vor.
  • Lernen und Lehren. Fügen Sie ein Beispiel aus der Dokumentation ein und beobachten Sie genau, wie ein Browser es anordnet.

Was zu beachten ist

  • Relative URLs. Bilder und Stylesheets, die über einen relativen Pfad wie /assets/logo.png referenziert werden, haben keinen Server, gegen den sie sich auflösen könnten, und werden daher nicht geladen. Verwenden Sie eine absolute https://-URL oder einen data:-URI, wenn ein Bild erscheinen soll.
  • Externe Ressourcen. Schriften, Stylesheets und Bilder, die von anderen Websites geladen werden, hängen davon ab, dass diese Websites es zulassen; manche senden Header, die das Laden innerhalb eines Rahmens blockieren.
  • Kein Skripting. Wenn Ihr Markup erst mit JavaScript zum Leben erwacht, zeigt die Vorschau seinen Zustand vor den Skripten. Das ist so gewollt, kein Fehler.

Häufig gestellte Fragen

Ja. Die Vorschau läuft in einem vollständig abgeschotteten iframe ohne jede Freigabe, sodass Skripte nicht ausgeführt werden können und das Markup die umgebende Seite nicht erreichen kann. Selbst schädliches HTML kann sich nur innerhalb des Rahmens selbst zeichnen.

Nein. Die Sandbox blockiert die Skriptausführung vollständig, sodass <script>-Tags und Inline-Event-Handler ignoriert werden. Sie sehen das statische Markup, und genau das macht die Vorschau sicher.

Ein relativer Pfad hat nichts, wogegen er sich auflösen könnte, und manche Hosts senden Header, die das Laden ihrer Bilder in einem Rahmen verhindern. Verwenden Sie eine absolute https://-URL oder betten Sie das Bild als data:-URI ein.

Ja. Fügen Sie das ganze Dokument ein (Doctype, <head>, <body> und alles) und es wird so gerendert, wie es geschrieben ist. Ein loses Fragment funktioniert ebenfalls; den Rest ergänzt der Browser.

Dieses Werkzeug rendert das HTML, das Sie als Text einfügen; es ruft niemals eine URL ab. Sie bestimmen genau, was gerendert wird, was für E-Mail-Vorlagen, herausgelöste Fragmente und schnelles Debugging praktisch ist.

Verwandte Tools

Farbrad-Explorer

Erforschen Sie das Farbrad interaktiv. Rotieren Sie Harmonien, vergleichen Sie HSL mit RYB, erkennen Sie komplementäre und triadische Paare in Echtzeit.

ASCII-Tabelle Referenz

Vollständige ASCII-Tabelle von 0 bis 127 mit Dezimal-, Hex-, Oktal-, Binär- und numerischer HTML-Zeichenreferenz für jedes Zeichen, einschließlich Steuerzeichen wie NUL, LF und DEL.

HTML-Zeichenreferenz

Durchsuchbare Liste von HTML-Entitäten, ihren benannten und numerischen Codes sowie eine Ein-Klick-Kopie für Sonderzeichen und Symbole.

Referenz für Tastenkombinationen

Durchsuchen Sie dokumentierte Standardkürzel für VS Code, Chrome und Bash mit GNU Readline unter macOS, Windows und Linux.

CSS-Scrollbar-Generator

Passen Sie das Erscheinungsbild der Bildlaufleiste per CSS an. Modernes scrollbar-color / scrollbar-width und das ältere ::-webkit-scrollbar für breite Browser-Unterstützung.

Zufallsbuchstaben-Generator

Erzeugen Sie zufällige A-Z-Buchstaben. Wählen Sie Anzahl, Großschreibung, Kleinschreibung oder gemischte Schreibweise für Spiele, Aufgaben und Unterricht.

Tool in anderen Sprachen verfügbar