Schreiben Sie HTML, CSS und JavaScript und sehen Sie während der Eingabe eine Live-Vorschau in einer Sandbox. Responsive Gerätebreiten, Hervorhebung der Monaco-Syntax, hübschere Formatierung, lokale automatische Speicherung und HTML-, Druck- oder PDF-Export. Kostenlos, keine Anmeldung.
Schreiben Sie HTML in Echtzeit und zeigen Sie es in der Vorschau an
Dieser Online-HTML-Editor mit Live-Vorschau rendert Ihr HTML, CSS und JavaScript neben dem Code etwa 300 ms, nachdem Sie mit der Eingabe aufgehört haben. Überprüfen Sie das Layout in den Breiten Desktop, Tablet (768 Pixel) und Mobilgerät (375 Pixel), bereinigen Sie das Markup mit Prettier und exportieren Sie es in .html oder PDF. Ihr Code wird nur in diesem Browser automatisch gespeichert und nie hochgeladen.
Dieser Live-HTML-Editor rendert Ihr Markup während der Eingabe neben dem Code, sodass Sie Prototypen von Layouts erstellen, Snippets testen und durch Experimentieren lernen können, ohne ein Projekt einzurichten. Es verwendet Monaco (die Editor-Engine hinter VS Code) zur Syntaxhervorhebung und automatischen Vervollständigung und läuft vollständig in Ihrem Browser, ohne dass eine Anmeldung erforderlich ist.
Merkmale
Echtzeit-Sandbox-Vorschau mit den Modi „Teilen“, „Code“ und „Vorschau“.
Wird automatisch im lokalen Speicher dieses Browsers gespeichert und nie hochgeladen
Als .html exportieren, als PDF drucken/speichern oder als schnelles mehrseitiges PDF
So verwenden Sie Live-HTML-Editor
1
Fügen Sie Ihren HTML-Code ein oder schreiben Sie ihn
Geben Sie ein vollständiges Dokument oder ein Fragment ein. Fügen Sie CSS in ein <style>-Tag und JavaScript in ein <script>-Tag ein oder laden Sie sie von einem CDN über https.
2
Sehen Sie sich die Live-Vorschau an
Das Vorschaufenster wird etwa 300 ms nach Beendigung der Eingabe erneut gerendert. Verwenden Sie die Split-, Code- oder Vorschauansicht, um den Arbeitsbereich anzuordnen.
3
Überprüfen Sie die Reaktionsbreiten
Wechseln Sie zwischen Desktop (volle Breite), Tablet (768 Pixel) und Mobilgerät (375 Pixel), um zu sehen, wie sich das Layout ändert.
4
Verschönern Sie das Markup
Klicken Sie auf Prettify, um das Dokument mit Prettier neu einzurücken (2-Leerzeichen-Einzug, 100-Zeichen-Zeilen).
5
Exportieren Sie Ihre Arbeit
Laden Sie den genauen Code als .html herunter, verwenden Sie Drucken → Als PDF speichern für auswählbaren mehrseitigen Text oder klicken Sie auf „PDF“, um schnell ein Bild zu erfassen.
Häufige Anwendungsfälle
Ein Anfänger gibt ein HTML-Tag ein und sieht sofort, was es bewirkt.
Ein Entwickler isoliert ein defektes Snippet und debuggt es, ohne ein Projekt zu starten.
Ein Vermarkter zeigt eine Vorschau einer HTML-E-Mail oder eines Landingpage-Blocks mit 375 Pixeln an, bevor er sie zur Überprüfung sendet.
Ein Lehrer zeigt im Unterricht Code und gerenderte Ausgabe nebeneinander.
Ein Freiberufler modelliert eine Komponente und sendet dem Kunden eine .html-Datei oder ein PDF.
Detaillierte Anleitung
So testen Sie HTML-Code online
Fügen Sie Ihren Code in den Editor ein und die Vorschau wird automatisch aktualisiert, ohne dass Sie die Schaltfläche „Ausführen“ drücken müssen. Sie können ein komplettes Dokument mit <!DOCTYPE html>, <head> und <body> oder nur ein Fragment wie ein <div> mit einigen Stilen einfügen, und der Browser füllt die fehlende Struktur aus. Wechseln Sie zur Vorschauansicht, um das Ergebnis in voller Größe zu sehen, oder zur Codeansicht, wenn Sie Platz zum Schreiben benötigen. Wenn etwas nicht richtig aussieht, klicken Sie zuerst auf „Verschönern“: Durch eine saubere Einrückung können Sie ein nicht geschlossenes Tag oder ein falsch platziertes </div> viel leichter erkennen.
Schreiben Sie HTML, CSS und JavaScript zusammen
Der Editor arbeitet an einem einzelnen HTML-Dokument, sodass CSS und JavaScript darin enthalten sind. Fügen Sie Stile in einem <style>-Block im <head> oder als Inline-Stilattribute hinzu und fügen Sie Verhalten in einem <script>-Block am Ende des <body> oder als Ereignisattribute wie onclick hinzu. Sie können eine Bibliothek oder ein Framework auch von einem CDN laden, z. B. einer Google-Schriftart, dem Play-CDN von Tailwind oder einer Diagrammbibliothek, wobei ein normales <link>- oder <script src>-Tag auf eine https-URL verweist. Die Vorschau führt Ihre Skripte in einer echten Browser-Engine aus, sodass sich DOM-Ereignisse, Timer, Canvas und Abrufaufrufe an CORS-fähige APIs alle wie auf einer Live-Seite verhalten.
Testen Sie responsive Layouts in Telefon- und Tablet-Breite
Verwenden Sie die Geräteschaltflächen über der Vorschau, um deren Breite einzuschränken. Fügen Sie <meta name="viewport" content="width=device-width, initial-scale=1"> in Ihren <head> ein, damit Medienabfragen genauso auf die Vorschaubreite reagieren wie auf einem Telefon.
Voreingestellt
Vorschaubreite
Was zu überprüfen ist
Desktop
Volle Scheibenbreite
Container mit maximaler Breite, mehrspaltige Raster, Hover-Zustände
Tablette
768px
Der übliche MD-Haltepunkt: Navigationsreduzierung, 2-Spalten-Layouts
Mobile
375px
Textumbruch, Größe des Tippziels, überlaufende Bilder, horizontaler Bildlauf
Was die Live-Vorschau kann und was nicht
Die Vorschau ist ein Sandbox-Frame, der aus Ihrem Code geladen wird. Aus Sicherheitsgründen hat es einen undurchsichtigen Ursprung: Ihre Skripte können die Cookies oder den Speicher dieser Website nicht lesen, und diese Website kann Ihre Seite nicht lesen. Dieses Design führt zu einigen vorhersehbaren Einschränkungen, die unten aufgeführt sind, damit Sie keine Zeit mit dem Debuggen des Editors statt Ihres Codes verlieren.
Funktioniert
Funktioniert nicht (und warum)
Inline <style>, Stilattribute und <script>
Relative Pfade wie src="img/logo.png": Es gibt keinen Ordner auf einem Server, anhand dessen sie aufgelöst werden könnten. Verwenden Sie vollständige https-URLs oder Daten-URIs
CSS und JS von einem CDN über https
localStorage, sessionStorage und Cookies in Ihrem Skript: Die Sandbox blockiert sie (sie lösen einen SecurityError aus)
Alert(), Confirm(), Formulare und Links werden in einem neuen Tab geöffnet
fetch() an APIs, die keine CORS-Header senden: Der Browser blockiert die Antwort, genau wie auf einer echten Site
Bilder und Schriftarten von öffentlichen URLs
Mehrere Dateien, NPM-Importe oder Build-Schritte: Es handelt sich um einen Einzeldokument-Editor, nicht um eine Projekt-IDE
Formatieren Sie unordentliches HTML mit einem Klick
Prettify führt den HTML-Formatierer von Prettier in Ihrem Browser aus. Es rückt verschachtelte Tags mit zwei Leerzeichen neu ein, bricht lange Zeilen bei 100 Zeichen um und fügt Attribute in ihre eigenen Zeilen ein, wenn ein Tag zu breit wird. Es ist auf die HTML-Struktur abgestimmt, sodass die Inhalte der <style>- und <script>-Blöcke weitgehend so belassen werden, wie Sie sie geschrieben haben. Es ändert nichts daran, was Ihre Seite rendert. Wenn das Markup einen Syntaxfehler aufweist, den Prettier nicht analysieren kann, wird eine Meldung angezeigt und Ihr Code bleibt genau so, wie er war.
Export nach HTML oder PDF
Es gibt drei Exportoptionen, die jeweils für einen anderen Job geeignet sind. Der .html-Download ist Byte für Byte der Code im Editor, der zum Öffnen in einem Browser oder zum Einfügen in ein Projekt bereit ist. „Drucken“ sendet die gerenderte Vorschau an den Druckdialog Ihres Browsers: Wählen Sie „Als PDF speichern“, um auswählbaren Text, funktionierende mehrseitige Umbrüche und alles, was Ihr JavaScript gezeichnet hat, zu erhalten. Die PDF-Schaltfläche ist eine Ein-Klick-Verknüpfung, die den statischen HTML- und CSS-Code als Bild erfasst, auf A4-Seiten aufteilt und herunterlädt. Da es sich um ein Bild handelt, ist dessen Text nicht auswählbar und mit JavaScript erstellte Inhalte werden nicht angezeigt. Wenn das schnelle PDF fehlschlägt, ist die häufigste Ursache ein externes Bild ohne CORS-Header; Verwenden Sie stattdessen Drucken.
Vorschau der HTML-E-Mail-Vorlagen
E-Mail-Clients unterstützen weitaus weniger HTML und CSS als Browser, daher folgen E-Mail-Vorlagen älteren Konventionen: ein tabellenbasiertes Layout, eine etwa 600 Pixel breite Inhaltsspalte, Inline-Stilattribute anstelle von <style>-Blöcken und Bilder mit Attributen fester Breite. Bauen Sie hier auf diese Weise auf und wechseln Sie zur 375-Pixel-Voreinstellung, um zu überprüfen, wie die E-Mail auf einem Telefon gestapelt wird. Die Vorschau zeigt, wie ein moderner Browser Ihre E-Mails darstellt, was eine gute erste Überprüfung darstellt. Einige Clients, insbesondere Outlook unter Windows, stellen sie anders dar. Senden Sie daher immer einen Test an echte Posteingänge, bevor eine Kampagne versendet wird.
Starter-Snippets zum Einfügen
Kurze Muster, die Sie eingeben und anpassen können. Jeder benötigt nur wenige Zeilen und zeigt sein Ergebnis sofort in der Vorschau an.
Nichts, was Sie eingeben, wird an einen Server gesendet. Um Ihre Arbeit zwischen Besuchen aufzubewahren, speichert der Editor Ihren Code automatisch im lokalen Speicher dieses Browsers auf diesem Gerät, sodass er nach einer Aktualisierung immer noch dort ist, aber nicht mit anderen Geräten oder anderen Browsern synchronisiert wird. Wenn Sie auf „Zurücksetzen“ klicken, wird Ihr Code durch das Beispieldokument ersetzt. Durch das Löschen der Daten dieser Website in Ihren Browsereinstellungen wird die gespeicherte Kopie gelöscht. Drücken Sie auf einem gemeinsam genutzten Computer „Zurücksetzen“, bevor Sie gehen.
Wann sollte stattdessen ein vollständiger Code-Spielplatz verwendet werden?
Dieser Editor ist für die schnelle, private Arbeit mit einer einzigen Datei konzipiert: Testen eines Snippets, Erlernen von HTML, Überprüfen eines Layouts auf Telefonbreite oder Anzeigen der Vorschau eines E-Mail-Blocks, ohne dass ein Konto erforderlich ist. Wenn Sie mehrere Dateien, NPM-Pakete, einen Framework-Erstellungsschritt, einen gemeinsam nutzbaren Link oder Echtzeit-Zusammenarbeit benötigen, ist ein vollständiger Playground wie CodePen, JSFiddle oder PlayCode die bessere Lösung. Viele Entwickler nutzen beides: einen schnellen Notizblock für Prüfungen wie diese und eine vollständige Spielwiese für Projekte, die sie teilen möchten.
Geben Sie Ihren HTML-Code ein oder fügen Sie ihn in den Editor ein. Die Vorschau wird etwa 300 ms nach Beendigung der Eingabe erneut gerendert und zeigt, wie ein echter Browser Ihren Code anzeigt. Es gibt keine Schaltfläche „Ausführen“, keine Installation und keine Anmeldung.
Kann ich CSS und JavaScript in den HTML-Editor einbinden?
Ja. Fügen Sie CSS in einen <style>-Block oder Stilattribute und JavaScript in einen <script>-Block oder Ereignisattribute wie onclick ein. Sie können Bibliotheken und Schriftarten auch von einem CDN mit einer https-URL laden. Da es sich um einen Einzeldokument-Editor handelt, werden separate CSS- und JS-Dateien nicht unterstützt.
Wie verschönere ich HTML-Code online?
Fügen Sie Ihren unordentlichen oder minimierten HTML-Code ein und klicken Sie auf „Verschönern“. Prettier rückt verschachtelte Tags mit zwei Leerzeichen neu ein und bricht lange Zeilen mit 100 Zeichen um, ohne die Darstellung der Seite zu ändern. Wenn der HTML-Code einen Syntaxfehler aufweist, den Prettier nicht analysieren kann, bleibt Ihr Code unberührt und Sie sehen eine Meldung.
Kann ich meinen HTML-Code als PDF exportieren?
Ja, auf zwei Arten. Drucken → Als PDF speichern verwendet die Druck-Engine Ihres Browsers, die auswählbaren Text, mehrseitige Ausgabe und alles, was Ihr JavaScript gerendert hat, bietet. Die PDF-Schaltfläche ist eine schnelle Bilderfassung des statischen HTML- und CSS-Codes mit nur einem Klick, aufgeteilt auf A4-Seiten. Der Text ist nicht auswählbar und die JavaScript-Ausgabe ist nicht enthalten.
Wird mein HTML-Code irgendwo gespeichert?
Nur in Ihrem eigenen Browser. Der Editor speichert automatisch im lokalen Speicher dieses Browsers, sodass Ihre Arbeit eine Aktualisierung übersteht, aber nichts auf einen Server hochgeladen und nicht mit anderen Geräten synchronisiert wird. Klicken Sie auf „Zurücksetzen“ oder löschen Sie die Daten dieser Website, um sie zu entfernen.
Warum wird mein Bild oder meine externe CSS-Datei nicht in der Vorschau geladen?
Relative Pfade wie „img/logo.png“ oder „styles.css“ haben keinen Ordner zum Auflösen, da die Vorschau aus Ihrem Code und nicht aus Dateien auf einem Server erstellt wird. Verwenden Sie eine vollständige https-URL, fügen Sie das CSS in einen <style>-Block ein oder wandeln Sie ein kleines Bild in einen Daten-URI um.
Warum gibt localStorage einen Fehler in meinem Skript aus?
Die Vorschau wird in einem Sandbox-Frame mit undurchsichtigem Ursprung ausgeführt, sodass die Daten dieser Site nicht berührt werden können. Infolgedessen sind localStorage, sessionStorage und Cookies für Ihren Code dort nicht verfügbar und lösen einen SecurityError aus. Testen Sie die Speicherlogik in einer lokalen Datei oder einem vollständigen Playground.
Kann ich diesen HTML-Editor verwenden, um als Anfänger HTML zu lernen?
Ja. Geben Sie einen Tag ein und sehen Sie sofort das Ergebnis. Beginnen Sie mit der Grundstruktur (<h1>, <p>, <a>, <img>), fügen Sie dann einen <style>-Block hinzu und experimentieren Sie mit Farben und Layout. Dieses sofortige Feedback ist viel schneller als das Bearbeiten einer Datei und das Aktualisieren eines Browser-Tabs.
Funktioniert es als responsive Vorschau?
Ja. Schalten Sie die Vorschau zwischen Desktop (volle Breite), Tablet (768 Pixel) und Mobilgerät (375 Pixel) um. Fügen Sie Ihrem <head> ein Viewport-Meta-Tag hinzu, damit Ihre Medienanfragen so reagieren, wie sie es auf einem echten Telefon tun würden.
