HTML-Vorschau
Eine HTML-Vorschau zeigt eine Webseite so an, wie sie später im Browser aussieht, während man ihren Programmcode noch bearbeitet. Sie ist heute auch dort wichtig, wo KI-Werkzeuge auf Zuruf Webseiten erzeugen und man das Ergebnis sofort sehen will.
Jede Webseite besteht im Kern aus einer Textdatei mit Anweisungen. Diese Anweisungen sind in der Sprache HTML geschrieben, die festlegt, was eine Überschrift ist, was ein Absatz und wo ein Bild steht. Für Menschen ist so eine Datei schwer zu lesen, weil sie voller spitzer Klammern und Kürzel steckt. Eine HTML-Vorschau nimmt diesen Text und stellt ihn fertig aufbereitet dar: mit richtigen Schriftgrößen, Farben und Bildern. Man sieht also nebeneinander, was man geschrieben hat und was dabei herauskommt. Ändert man den Text, ändert sich die Darstellung meist sofort mit.
Warum Entwickler nicht blind schreiben wollen
Ohne Vorschau müsste man die Datei speichern, in den Browser wechseln, neu laden und schauen. Das klingt harmlos, passiert aber hunderte Male am Tag. Jeder dieser Wechsel kostet ein paar Sekunden und reißt die Konzentration auseinander. Eine Vorschau verkürzt diese Schleife auf beinahe null.
Wichtiger ist noch etwas anderes: Fehler fallen früher auf. Eine vergessene schließende Klammer kann dazu führen, dass der halbe Text plötzlich fett ist oder gar nicht erscheint. In der Vorschau sieht man das im selben Moment, in dem man den Fehler macht. Sucht man ihn erst Stunden später, ist die Ursache viel schwerer zu finden.
Für Menschen ohne Programmierkenntnisse ist die Vorschau oft der einzige verständliche Zugang. Eine Redakteurin muss nicht wissen, was ein div ist. Sie muss nur sehen, ob der Artikel gut aussieht. Die Vorschau übersetzt zwischen Technik und Ergebnis.
Was im Vorschaufenster tatsächlich passiert
Die Vorschau ist in aller Regel selbst ein kleiner Browser. Sie bekommt den HTML-Text übergeben und wertet ihn nach denselben Regeln aus wie Chrome oder Firefox. Meist steckt dahinter ein sogenanntes iframe, also ein eigenständiges Fenster innerhalb der Seite. Dieses Fenster ist vom Rest abgeschottet, damit fehlerhafter Code nicht das ganze Werkzeug lahmlegt.
Bei einer Live-Vorschau überwacht das Programm zusätzlich jede Tastatureingabe. Nach kurzer Pause schickt es den aktuellen Stand an das Vorschaufenster und lässt es neu zeichnen. Manche Systeme tauschen sogar nur die geänderten Stellen aus, damit die Position im Dokument erhalten bleibt. Das nennt man Hot Reload.
Ein häufiger Irrtum ist, die Vorschau sei die Wahrheit. Das stimmt nur ungefähr. Verschiedene Browser stellen dieselbe Seite leicht unterschiedlich dar, und auf einem Handy ist der Bildschirm viel schmaler. Eine Vorschau ist eine sehr gute Näherung, ersetzt aber keinen echten Test auf echten Geräten.
Von Baukastensystemen bis zu KI-Chatbots
Am offensichtlichsten begegnet man dem Prinzip in Baukastensystemen für Webseiten und in Redaktionssystemen wie WordPress. Dort gibt es fast immer einen Knopf mit der Aufschrift Vorschau. Auch E-Mail-Programme nutzen das: Newsletter werden intern als HTML verschickt, und vor dem Versand will niemand raten, wie das Layout beim Empfänger ankommt.
In den vergangenen Jahren ist der Begriff durch KI-Werkzeuge neu wichtig geworden. Systeme wie ChatGPT, Claude oder spezialisierte Dienste können auf eine Anweisung hin fertigen Webseiten-Code erzeugen. Direkt daneben läuft eine HTML-Vorschau, in der das Ergebnis sofort sichtbar wird. Man beschreibt eine Änderung in normaler Sprache, das Modell schreibt den Code um, die Vorschau aktualisiert sich.
Genau das macht solche Werkzeuge für Laien überhaupt erst brauchbar. Wer den erzeugten Code nicht beurteilen kann, kann trotzdem das Bild beurteilen. In Produktnamen taucht das oft als Artifacts, Canvas oder Preview auf. Gemeint ist im Kern immer dasselbe: ein Fenster, das aus Code sofort ein sichtbares Ergebnis macht.