HTML-, CSS- und JavaScript-Playground

So funktioniert es

1. Wechseln Sie mit den Schaltflächen oben zwischen den Editoren für HTML, CSS und JavaScript und schreiben Sie Ihren Code.
2. Die Vorschau aktualisiert sich automatisch, sobald Sie beim Tippen pausieren, oder schalten Sie das aus und klicken Sie auf Ausführen.
3. Prüfen Sie die Konsole auf Ausgaben und Fehler und klicken Sie dann auf HTML herunterladen, um Ihre Seite zu speichern.

Optionen erklärt

Sandbox

Die Vorschau läuft in einer isolierten Sandbox, die weder auf Cookies noch auf den Speicher dieser Website zugreifen kann und keine Dialoge öffnen kann.

Konsole

Zeigt console.log-, warn- und error-Ausgaben sowie unbehandelte Fehler mit Zeilennummer und behält die letzten 200 Einträge.

Download

Fasst die drei Teile in einer HTML-Datei zusammen, mit den Stilen in einem style-Tag und dem Skript am Ende des body.

Wie die Seite zusammengesetzt wird

Die drei Editoren werden in dieser Reihenfolge zu einem Dokument zusammengefügt. Dasselbe Layout erhalten Sie, wenn Sie auf „HTML herunterladen“ klicken, nur dass das kleine Skript, das die Konsolenausgabe an die Seite unter der Vorschau sendet, im Download fehlt.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
/* your CSS */
</style>
</head>
<body>
<!-- your HTML -->
<script>
// your JavaScript
</script>
</body>
</html>

Da das Skript nach Ihrem HTML steht, können Sie document.getElementById sofort verwenden, ohne auf das Laden der Seite zu warten. Im HTML-Editor schreiben Sie nur, was in den Body gehört, nicht die Tags html, head oder body selbst. Die Vorschau ist ein iframe, das nur die Berechtigung zum Ausführen von Skripten hat. Deshalb sind Alert-Dialoge und der Zugriff auf die Cookies dieser Website blockiert.

Häufig gestellte Fragen

Datenschutz

Dieses Tool läuft vollständig in Ihrem Browser. Ihre Dateien und Texte werden auf Ihrem Gerät verarbeitet und nie auf unsere Server hochgeladen.