Der HTML-Viewer vereint Editor und Vorschau in einer Arbeitsfläche. Öffne eine Datei, füge Code ein, prüfe die Konsole und lade den Quelltext herunter oder teile ihn.

Was ist ein HTML Viewer?

Ein HTML-Viewer stellt HTML als Webseite dar. Dieser aktualisiert sich beim Tippen, sodass du Code ohne neues Projekt prüfen kannst. CSS in <style> und JavaScript in <script> funktionieren; JSX und serverseitige Sprachen müssen zunächst in HTML umgewandelt werden.

Wie ein HTML Viewer funktioniert

Dieser Viewer rendert dein Dokument in einem abgeschotteten iframe. Skripte können laufen, aber weder die übergeordnete Seite auslesen noch deinen Tab umleiten. Externe Bilder, Styles, Skripte und Netzwerkanfragen können weiterhin ihre eigenen Server kontaktieren.

Zum Rendern wird dein Quelltext nicht an uns hochgeladen. Anfragen des Dokuments unterliegen Browserregeln wie CORS. Links enthalten komprimiertes HTML; ihre Länge hängt vom Dokument ab. Bei sehr langen Links ist eine Datei praktischer.

HTML Viewer, CodePen, JSFiddle oder die lokale Datei

CodePen und JSFiddle bieten gehostete Code-Spielwiesen. Vergleiche ihre Optionen zum Speichern von Projekten und für getrennte Code-Panels, wenn du mehr als ein HTML-Dokument brauchst.

Eine lokale HTML-Datei öffnen ist praktisch, wenn du die Datei schon hast. Relative Bilder und Styles müssen unter den angegebenen Pfaden verfügbar sein. Für Projekte mit Build-Schritt oder API nutze den Entwicklungsserver des Projekts.

HTML Viewer Cat dient dem schnellen Bearbeiten und Vorschauen. Ein Konto ist nicht nötig. Ein lokaler Entwurf bewahrt deine Arbeit in diesem Browser auf; mit dem HTML-Download kannst du sie auch anderswo speichern.

Der Arbeitsbereich

Editor und Vorschau füllen das Fenster. Öffne die Konsole für Meldungen und Fehler oder wähle ein Beispiel in der unteren Leiste.

Bearbeiten und testen

Lass Live eingeschaltet, um Änderungen beim Tippen zu sehen, oder pausiere und drücke Ausführen, sobald dein Skript bereit ist. Auf breiten Bildschirmen testen Geräterahmen verschiedene Ansichtsbreiten; sie emulieren keinen anderen Browser oder E-Mail-Client.

Der Editor bietet Syntaxhervorhebung, Suche, Code-Faltung und Rückgängig. Formatieren nutzt Prettier. Ziehe den Trenner, um die Paneele anzupassen. Geteilte Links enthalten den HTML-Quelltext; Formularwerte und JavaScript-Zustand der Vorschau werden nicht gespeichert.

Nutzung und Speicherung

Kostenlos und ohne Konto.
Das Rendering erfolgt im Browser; externe Ressourcen können Netzwerkanfragen senden.
Entwürfe und Einstellungen werden lokal gespeichert. Die Analyse läuft standardmäßig ohne Cookies; mit Zustimmung wird ein Analyse-Cookie aktiviert.
Dateiimporte sind auf 10 MB begrenzt. Lade dein HTML herunter, um eine separate Kopie zu behalten.

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