HTML-Editor online mit Live-Vorschau
HTML-Editor online mit Live-Vorschau: HTML und CSS schreiben, Ergebnis sofort sehen, JavaScript auf Wunsch in einer abgeschotteten Sandbox ausführen.
Alles läuft in Ihrem Browser. Der Code wird nicht übertragen; Ihr letzter Entwurf bleibt nur lokal in diesem Browser gespeichert. Die Vorschau ist abgeschottet: Skripte laufen nur, wenn Sie es einschalten, und nie mit Zugriff auf diese Seite.
HTML und CSS im Browser testen
Dieser HTML-Editor online zeigt Ihren Code sofort als Live-Vorschau. Schreiben oder fügen Sie HTML mit eingebettetem CSS ein, die Vorschau aktualisiert sich beim Tippen. So können Sie HTML testen, ein Stück CSS testen oder einen Newsletter-Baustein prüfen, ohne eine Datei anzulegen oder einen Server zu starten. Über die Breitenauswahl sehen Sie, wie die Seite auf einem Smartphone oder Tablet umbricht. Mit „Als HTML-Datei speichern“ laden Sie den Code als seite.html herunter.
Technisch wird der Code über das Attribut srcdoc in einen iframe geladen, also per iframe srcdoc ohne Umweg über einen Server. Der iframe hat das Attribut sandbox: Ohne Ihre Freigabe läuft kein JavaScript, und auch mit Freigabe hat der Code eine eigene, leere Herkunft. Er kann weder diese Seite noch Cookies oder gespeicherte Daten lesen. Zusätzlich setzt der Editor eine Content-Security-Policy: Skripte von fremden Servern, Formularversand und Netzwerkanfragen per fetch sind gesperrt. Externe Bilder, Schriften und Stylesheets bleiben ebenfalls gesperrt, bis Sie sie ausdrücklich erlauben, damit beim Tippen keine Anfragen an fremde Server gehen.
Grenzen: Links in der Vorschau öffnen sich nicht, und Bibliotheken von einem CDN lassen sich nicht einbinden. Für größere Projekte mit mehreren Dateien ist ein lokaler Editor besser. Ungültiges HTML wird wie im Browser stillschweigend repariert; zum Prüfen und Aufräumen eignet sich HTML formatieren, für reines Markdown die Markdown-Vorschau.
Anleitung: HTML-Editor online in 5 Schritten
- HTML-Code mit eingebettetem CSS einfügen oder mit „Beispiel laden“ starten.
- „Automatisch aktualisieren“ eingeschaltet lassen oder mit „Vorschau aktualisieren“ manuell neu zeichnen.
- Bei Bedarf „JavaScript ausführen“ oder „Externe Bilder und Stylesheets laden“ einschalten.
- Unter „Breite der Vorschau“ Smartphone (375 px), Tablet (768 px) oder 1024 px wählen.
- Mit „Als HTML-Datei speichern“ oder „Code kopieren“ das Ergebnis übernehmen.
Typische Anwendungsfälle
- CSS testen: Einen Schnipsel aus einer Anleitung oder einem Forum ausprobieren, ohne ein Projekt anzulegen.
- Newsletter-Bausteine: Einen HTML-Abschnitt vor dem Einfügen ins Versandwerkzeug ansehen.
- Mobile Ansicht: Prüfen, wie ein Layout bei 375 oder 768 Pixel Breite umbricht.
- Lernen und Unterricht: HTML-Beispiele ändern und die Wirkung sofort sehen.
Häufige Fragen
Ist es sicher, fremden HTML-Code hier einzufügen?
Die Vorschau läuft in einem iframe mit sandbox-Attribut und eigener leerer Herkunft. Selbst eingeschaltetes JavaScript kann diese Seite, Cookies und gespeicherte Daten nicht lesen. Skripte von fremden Servern und Netzwerkanfragen sind zusätzlich per Content-Security-Policy gesperrt.
Warum werden meine Bilder nicht angezeigt?
Bilder von anderen Servern sind standardmäßig gesperrt, damit keine Anfragen ins Netz gehen. Schalten Sie „Externe Bilder und Stylesheets laden“ ein. Relative Pfade wie bilder/logo.png funktionieren nicht, weil es keinen Server mit diesen Dateien gibt.
Kann ich JavaScript ausführen?
Ja, schalten Sie „JavaScript ausführen“ ein. Eingebettete Skripte im script-Tag laufen dann. Skripte von externen Adressen, etwa von einem CDN, bleiben gesperrt.
Wird mein Code gespeichert?
Der letzte Entwurf wird nur lokal im Speicher Ihres Browsers abgelegt, damit er nach dem Neuladen noch da ist. An einen Server wird nichts übertragen. Mit „Leeren“ entfernen Sie den Entwurf.
Wie teste ich die mobile Ansicht?
Wählen Sie über der Vorschau „Smartphone (375 px)“ oder „Tablet (768 px)“. Damit die Seite richtig skaliert, gehört in den head das Meta-Tag viewport mit width=device-width, initial-scale=1.
Wie teste ich HTML-Code ohne Webserver?
Den Code hier einfügen, die Vorschau erscheint sofort. Alternativ speichern Sie ihn mit „Als HTML-Datei speichern“ und öffnen die Datei per Doppelklick im Browser.
Kann ich hier eine HTML-E-Mail-Signatur testen?
Ja, als Browservorschau. E-Mail-Programme stellen HTML aber teils anders dar, Outlook unter Windows etwa mit der Word-Engine; testen Sie die Signatur deshalb zusätzlich mit einer echten Mail.
Das könnte auch helfen
Farbumwandler
HEX, RGB, HSL, HSV, CMYK und OKLCH ineinander umrechnen, mit Farbwähler, Vorschau und Farbtönen.
ÖffnenFarbpalette aus Bild
Die wichtigsten 5 bis 10 Farben eines Bildes als HEX-Codes ermitteln, lokal im Browser.
ÖffnenKontrast prüfen (WCAG)
Kontrastverhältnis zweier Farben nach WCAG prüfen, AA und AAA, mit Vorschlag für passende Farbtöne.
ÖffnenCSS-Gradient-Generator
Linearen, radialen und konischen Farbverlauf zusammenstellen und den CSS-Code kopieren.
ÖffnenBox-Shadow-Generator
CSS-Schatten mit mehreren Ebenen, inset und Deckkraft einstellen, Vorschau sehen, Code kopieren.
ÖffnenFlexbox-Generator
Flexbox-Eigenschaften per Auswahl setzen, die Wirkung live sehen und das CSS kopieren.
Öffnen