In diesem Artikel
Was ist HTML Live Preview?
HTML Live Preview ist ein Code-Editor im Browser, der Ihr HTML, CSS und JavaScript in Echtzeit rendert. Während Sie tippen, aktualisiert sich das Ausgabefenster sofort und liefert unmittelbares visuelles Feedback, ohne dass Sie zwischen Editor und Browser-Tab wechseln müssen.
Die Vorschau läuft in einem sandboxed iframe mit strengen Sicherheitsbeschränkungen. Das bedeutet, dass Ihr Code in einer isolierten Umgebung ausgeführt wird – er kann weder auf die übergeordnete Seite noch auf Cookies oder den lokalen Speicher zugreifen. Sie erhalten einen sicheren Spielplatz zum Experimentieren, ohne jedes Risiko für die Host-Anwendung.
So funktioniert die Live-Vorschau
Der Editor fasst Ihr HTML, CSS und JavaScript zu einem einzigen Dokument zusammen und fügt es in ein sandboxed iframe ein. Aktualisierungen werden entprellt (debounced), damit die Vorschau reaktionsschnell bleibt, ohne den Browser zu überlasten.
- Sandboxed iframe – die Vorschau läuft ausschließlich mit sandbox="allow-scripts" und blockiert für vollständige Isolation den Zugriff auf die übergeordnete Seite, Cookies, Formulare und Navigation
- Getrennte Code-Tabs – schreiben Sie HTML, CSS und JavaScript in eigenen Bereichen, jeweils mit sprachgerechter Bearbeitung, die beim Rendern automatisch zusammengeführt werden
- Entprellte Aktualisierungen – Änderungen werden nach einer kurzen Tipppause angewendet, was die Vorschau flüssig hält und ständiges Neu-Rendern bei jedem Tastenanschlag vermeidet
Kostenlos testen – keine Registrierung erforderlich
HTML Live Preview ausprobieren →Wann Sie HTML Live Preview einsetzen sollten
Die Live-Vorschau ist ideal, wann immer Sie schnelles visuelles Feedback zu HTML und CSS benötigen, ohne eine vollständige Entwicklungsumgebung.
- Schnelles Prototyping – testen Sie Layout-Ideen, Farbschemata und Komponentendesigns sofort, ohne ein Build-Tool oder einen Dev-Server einzurichten
- HTML und CSS lernen – Einsteiger sehen die Wirkung jedes Tags und jeder Eigenschaft unmittelbar, wodurch die Lernschleife deutlich enger wird
- E-Mail-Vorlagen testen – zeigen Sie HTML-E-Mail-Layouts mit Inline-Stilen in der Vorschau an, um das Rendering vor dem Versand zu prüfen, da E-Mail-Clients nur eingeschränkte CSS-Unterstützung bieten
Häufig gestellte Fragen
Ist die Vorschau sicher? Kann mein Code auf die übergeordnete Seite zugreifen?
Die Vorschau ist vollständig sandboxed. Das iframe verwendet sandbox="allow-scripts" ohne allow-same-origin, was bedeutet, dass Ihr Code zwar JavaScript ausführen, aber nicht auf das DOM, die Cookies, den localStorage oder die Sitzungsdaten der übergeordneten Seite zugreifen kann. Dies ist dasselbe Sicherheitsmodell, das Plattformen wie CodePen und JSFiddle verwenden.
Warum ist allow-same-origin nicht in der Sandbox enthalten?
Würde man allow-same-origin zusammen mit allow-scripts einbeziehen, könnte der Vorschau-Code die Sandbox vollständig verlassen – er könnte auf die Cookies der übergeordneten Seite zugreifen, das DOM verändern oder sensible Daten auslesen. Das Weglassen sorgt für vollständige Isolation. Der Nachteil ist, dass localStorage und sessionStorage innerhalb der Vorschau nicht verfügbar sind, doch dies ist eine bewusste Sicherheitsentscheidung.
Kann ich externe CSS- oder JavaScript-Bibliotheken in der Vorschau laden?
Ja. Sie können link- und script-Tags mit Verweisen auf CDN-URLs (z. B. Bootstrap, Tailwind, jQuery) in Ihrem HTML-Bereich hinzufügen. Das sandboxed iframe erlaubt Netzwerkanfragen zum Laden externer Ressourcen. Beachten Sie jedoch, dass auch externe Skripte den Sandbox-Beschränkungen unterliegen – sie können ebenfalls nicht auf die übergeordnete Seite zugreifen.