code_blocks HTML/CSS/JS Live-Editor star

So funktioniert es

Tippen Sie in die HTML-, CSS- und JS-Tabs, und der Vorschaubereich aktualisiert sich während der Eingabe, indem er das zusammengesetzte Ergebnis in einem sandboxed iframe rendert. Das sandbox-Attribut ist auf allow-scripts ohne allow-same-origin gesetzt — genau das macht es sicher: Skripte, die in der Vorschau laufen, werden in einem eigenständigen, undurchsichtigen Origin ausgeführt, sodass sie weder die Cookies, den lokalen Speicher noch das DOM dieser Seite lesen können, und diese Seite kann umgekehrt nicht auf das iframe zugreifen. Diese Isolation ist eine vom Browser durchgesetzte Sicherheitsgrenze, kein bloßer visueller Rahmen — es ist derselbe Mechanismus, mit dem Websites nicht vertrauenswürdige Drittinhalte (Werbung, Widgets, von Nutzern eingereichte Codeschnipsel) sicher einbetten, ohne dem enthaltenen Code vertrauen zu müssen.

Das Bearbeiten selbst ist bewusst schlicht gehalten: drei Textfelder, keine Syntaxhervorhebung, keine Autovervollständigung. Das ist ein bewusster Kompromiss und kein fehlendes Feature — ein echtes Code-Editing-Erlebnis (Schlüsselwörter erkennen, Klammern zuordnen, Tags automatisch vervollständigen) bedeutet, eine umfangreiche Editor-Bibliothek von Drittanbietern zu laden, was Gewicht und eine Ladeverzögerung mit sich bringt, bevor Sie überhaupt ein Zeichen eingeben können. Dieses Tool optimiert genau für das Gegenteil: die Seite öffnen und sofort loslegen, ganz ohne Abhängigkeiten und ohne jeglichen Build-Schritt.

Gut zu wissen

Jeder Tastendruck in einem der drei Tabs löst einen Neuaufbau aus: das aktuelle HTML, das aktuelle CSS eingebettet in ein <style>-Tag und das aktuelle JS eingebettet in ein <script>-Tag werden zu einem Dokument zusammengesetzt und in das iframe geschrieben. Es gibt kein Diffing und kein inkrementelles Patchen — das gesamte Vorschaudokument wird einfach ersetzt, was in dieser Größenordnung schnell genug ist, um sich sofort anzufühlen, während die Implementierung einfach bleibt. Da alles — Bearbeiten und Rendern — in Ihrem Browser stattfindet, gibt es keinen Server-Umweg und kein Konto ist nötig. Es eignet sich gut, um schnell einen CSS-Trick zu testen, einen JavaScript-Fehler aus einer größeren Codebasis zu isolieren, bevor Sie ihn melden, oder eine kleine Komponente zu prototypisieren, bevor Sie das funktionierende Ergebnis in ein echtes Projekt kopieren. Nichts, was Sie eingeben, wird automatisch irgendwo gespeichert — behandeln Sie es also als Notizblock: kopieren Sie alles, was Sie behalten möchten, bevor Sie den Tab schließen.