Methodik

1. Editor-Architektur

Der Arbeitsbereich nutzt drei Texteditoren für HTML, CSS und JavaScript mit Zeilennummern-Leisten, Tab-Einrückungsverarbeitung, Schriftgrößensteuerung und optionalem Zeilenumbruch.

2. HTML-Verarbeitung

HTML aus dem HTML-Bereich wird in den body eines generierten Dokuments eingefügt. Das Tool führt HTML nicht als UI der übergeordneten Seite aus.

3. CSS-Injektion

CSS wird in ein style-Element im head des generierten Dokuments eingefügt, damit Regeln nur auf das Vorschaudokument angewendet werden.

4. JavaScript-Ausführung

JavaScript wird in ein script-Element innerhalb des Vorschaudokuments eingefügt. Es läuft nach Run im Browsing-Kontext des iframe.

5. iframe-Rendering

Das kombinierte Dokument wird iframe.srcdoc zugewiesen, wodurch ein neues Vorschaudokument entsteht, ohne die übergeordnete Seite zu navigieren.

6. Sandbox-Isolation

Das iframe verwendet ein sandbox-Attribut (Skripte für die Vorschau erlaubt). Übergeordnete DOM-APIs werden für die Ausführung von Benutzercode nicht bereitgestellt.

7. Konsolenbehandlung

Eine kleine Brücke in der Vorschau leitet console.log/info/warn/error und Laufzeitfehler per postMessage an das übergeordnete Fenster zur Anzeige weiter.

8. Browser-APIs

Was Skripte tun können, hängt von der Browser-Richtlinie und den Sandbox-Berechtigungen ab. Einige APIs verhalten sich in iframes anders als auf Top-Level-Seiten.

9. Lokaler Speicher

Der Editorzustand kann in localStorage-Schlüsseln gespeichert werden, die auf diesen Ursprung beschränkt sind, damit ein Refresh laufende Arbeit nicht löscht.

10. Einschränkungen

Es gibt keine serverseitige Kompilierung für Standard-HTML/CSS/JS. Komplexe Build-Pipelines, private Pakete und privilegierte Geräte-APIs liegen außerhalb des Umfangs.

11. Datenschutzaspekte

Die Vorschau-Zusammenstellung erfolgt clientseitig. Lokale Persistenz bleibt im Browser, es sei denn, Sie exportieren oder kopieren Inhalte woanders hin.