HTML einfügen und im HTML Viewer gerendert sehen — mit Geräteansichten, einer Live-Konsole, PNG- und PDF-Export und Links, die das Dokument in der URL selbst tragen. Mehr ist die Seite nicht.

Was ist ein HTML Viewer?

Ein HTML Viewer ist ein Werkzeug, das rohes HTML-Markup entgegennimmt und als lebendige Webseite rendert, ohne dass du das Markup erst in einer Datei speichern und im Browser öffnen musst. Die häufigste Form ist ein Textfeld zum Einfügen und Rendern: Du fügst links HTML ein, rechts erscheint das Ergebnis, und jede Änderung aktualisiert die Vorschau beim Tippen. Genutzt wird das vor allem, um von KI erzeugtes HTML zu prüfen, E-Mail-Vorlagen zu debuggen, die Ausgabe von React-Komponenten gegenzuchecken und visuelle Entwürfe per URL zu teilen.

Wie ein HTML Viewer funktioniert

Moderne HTML Viewer laufen vollständig im Browser. Das eingefügte HTML wird in ein <iframe srcDoc="..."> auf der Seite geschrieben, woraufhin der Browser es rendert, als wäre es ein eigenes Dokument von einer eigenen Herkunft. Das Attribut sandbox am iframe begrenzt, was dieses HTML darf: Skripte sind meist erlaubt, damit interaktive Komponenten funktionieren, aber das iframe kann die übergeordnete Seite weder navigieren noch deren Cookies lesen.

Weil das Rendern im Client passiert, muss das ursprüngliche HTML den Browser nie verlassen. Es gibt keinen Upload, keinen Parser auf dem Server und kein Risiko, dass der Betreiber deinen Code liest. Der Preis dafür: Ein Viewer im Browser kann nichts rendern, das Ressourcen vom Server braucht — deine lokalen API-Endpunkte sind aus dem iframe zum Beispiel nicht erreichbar — und das Teilen über das URL-Fragment endet bei wenigen Kilobyte. Danach ist eine Datei die bessere Wahl.

HTML Viewer, CodePen, JSFiddle oder die lokale Datei

Jedes Werkzeug ist in einer anderen Größenordnung stark. CodePen und JSFiddle sind richtig, wenn du eine vollständige, dauerhafte Demo über mehrere Sitzungen hinweg teilen willst: Sie speichern deinen Schnipsel auf ihrem Server, geben ihm eine stabile URL und bieten in den Bezahlstufen Funktionen zur Zusammenarbeit. Sie erwarten, dass du dich anmeldest, den Schnipsel deinem Konto zuordnest und ihn wie eine kleine Projektdatei behandelst. Der Preis: Dein Code liegt auf fremder Infrastruktur, der Editor bringt zusätzliche Oberfläche mit (Sammlungen, Einstellungen, Kommentare), und die Seite wiegt mehr als eine reine Vorschau.

Eine HTML-Datei direkt im Browser zu öffnen ist die leichteste Variante, wenn du etwas nur einmal rendern willst — ganz ohne fremde Website. Der Preis: Du musst die Datei erst speichern, dein Browser behandelt sie womöglich als andere Herkunft als localhost, und teilen kannst du sie nur, indem du die Datei verschickst oder irgendwo hostest.

Ein HTML Viewer zum Einfügen und Rendern liegt dazwischen. Kein Speichern, kein Konto, keine Projektdatei — einfügen, gerendert sehen, bei Bedarf per URL-Fragment teilen. Das ist das Werkzeug für flüchtiges HTML: ein Schnipsel aus einer KI, die Vorschau einer E-Mail-Vorlage, der schnelle Blick auf eine Komponente. Sobald sich der Schnipsel wie ein echtes Projekt anfühlt — Versionskontrolle, Mitarbeitende, Dauerhaftigkeit — ist der Wechsel zu CodePen oder einer lokalen Datei fällig.

Warum nur ein Werkzeug

Früher waren es vier. Neben dem Viewer standen ein Markdown-Editor, ein JSON-Viewer und eine eigene Seite für HTML zu PDF; niemand kam ihretwegen, also wurden sie eingestellt und der PDF-Export wanderte in den Viewer selbst. Übrig ist das, weswegen die Leute tatsächlich kamen. Es verdient seinen Platz: Was sich nicht in einem Satz erklären lässt, wird nicht veröffentlicht.

Wie es funktioniert

Drei Dinge zählen: Tempo, Sicherheit und realistische Breiten. Tempo heißt, dass sich die Vorschau beim Tippen aktualisiert und nicht erst auf Knopfdruck. Sicherheit heißt, dass alles Eingefügte in einem Sandbox-iframe läuft und daher weder deine Cookies lesen noch deinen Tab umleiten kann. Realistische Breiten heißt, dass du mit einem Klick zwischen Desktop, Tablet und Handy wechselst, statt das Browserfenster zu ziehen.

Der Editor ist eine vollwertige CodeMirror-Instanz mit Syntaxhervorhebung, Klammernpaarung, Zeilennummern und Tastenkürzeln. Die Vorschau ist ein Sandbox-iframe mit erlaubten Skripten, damit sich interaktive Komponenten wirklich so verhalten, wie sie sollen. Die Trennung zwischen Editor und Vorschau lässt sich ziehen und merkt sich ihre Position über Besuche hinweg. Entwürfe werden automatisch im localStorage gesichert, und der Teilen-Button kodiert dein HTML als Base64 in ein URL-Fragment (#s=…), sodass der Link den Inhalt selbst trägt — nichts berührt einen Server.

Was so bleibt

Kostenlos. Ohne Anmeldung, ohne Konto, ohne E-Mail-Schranke.
Läuft in deinem Browser. Dein HTML verlässt deinen Rechner nur, wenn du einen Link teilst.
Nichts wird auf deinem Gerät gespeichert, außer du willst es. Lehnst du ab, zählen wir den Besuch weiterhin — anonym und ohne Cookie.
Kein Funktionswildwuchs. Was sich nicht in einem Satz erklären lässt, wird nicht veröffentlicht.

Gebaut und gepflegt von Axel, unabhängiger Entwickler in Norwegen.