Code-Spielwiese
Online-HTML-, CSS- und JavaScript-Spielwiese mit Live-Vorschau, Editor mit Zeilennummern und abgefangener Konsole. Snippets sofort testen und das Ergebnis als HTML-Datei herunterladen - komplett im Browser.
Was ist eine Code-Spielwiese?
Eine Code-Spielwiese ist eine Sandbox, in der du HTML, CSS und JavaScript schreibst und das gerenderte Ergebnis sofort siehst. Diese hier bietet zusätzlich eine abgefangene Konsole, Editoren mit Zeilennummern und den Download deiner Arbeit als einzelne HTML-Datei.
Wie funktioniert die Live-Vorschau?
Deine drei Code-Panes werden zu einem vollständigen HTML-Dokument kombiniert und in einer Sandbox-iframe gerendert. Bei aktivierter Auto-Ausführung aktualisiert sich die Vorschau etwa eine halbe Sekunde nach dem Tippen; sonst drücke Ausführen.
Was zeigt das Konsolenpanel?
Alles, was die Seite per console.log, console.info, console.warn und console.error ausgibt, plus Laufzeitfehler und unbehandelte Promise-Ablehnungen mit Zeilennummern. Es wird bei jedem Lauf geleert.
Bleibt mein Code beim Neuladen erhalten?
Ja. Ein Entwurf aller drei Panes wird lokal in deinem Browser gespeichert und beim nächsten Besuch wiederhergestellt. Zurücksetzen stellt den Original-Democode her, und das Löschen der Site-Daten entfernt den Entwurf.
Ist die Vorschau sandboxed und sicher?
Die Vorschau läuft in einer Sandbox-iframe ohne Same-Origin-Zugriff: Getestete Skripte können diese Seite und ihre Cookies nicht lesen. Teste dennoch nur vertrauenswürdigen Code, denn er läuft in deinem Browser.
Kann ich mein Experiment herunterladen?
Ja. .html herunterladen speichert das aktuelle HTML, CSS und JavaScript kombiniert in einer eigenständigen Datei, die du in jedem Browser öffnen oder teilen kannst.
Was kann ich im JavaScript-Pane ausführen?
Standard-Browser-JavaScript: DOM-Manipulation, Events, Canvas, fetch an öffentliche APIs (vorbehaltlich deren CORS-Regeln) und jede inline eingefügte Bibliothek. Module und npm-Pakete werden nicht aufgelöst.
Braucht die Spielwiese eine Internetverbindung?
Nur um die Seite selbst zu laden. Bearbeiten, Vorschau und Konsolenmitschnitt laufen danach lokal, und dein Code wird niemals hochgeladen.
So verwenden Sie Code-Spielwiese
Dieses Playground vereint dein HTML, CSS und JavaScript in einer sandkastenisierten Live-Vorschau vollständig in deinem Browser, mit einem Konsolenpanel, das Logs und Fehler einfängt. Ein Entwurf wird lokal gespeichert, damit du weitermachen kannst, wo du aufgehört hast.
- Bearbeite die HTML-, CSS- und JavaScript-Felder — jeder Editor hat Zeilennummern und Syntaxhervorhebung.
- Bei aktivierter Auto-Ausführung aktualisiert sich die Vorschau automatisch beim Tippen; andernfalls klicke auf Ausführen (oder schalte die Auto-Ausführung aus und starte manuell).
- Behalte das Konsolenpanel unter der Vorschau im Auge: console.log-Ausgaben, Warnungen, Fehler und unbehandelte Ausnahmen erscheinen dort mit Zeilennummern.
- Mit Zurücksetzen kehrst du zur eingebauten Demo zurück, mit .html herunterladen speicherst du alles als eine in sich geschlossene Datei.
- Mit In neuem Fenster öffnen siehst du das aktuelle Dokument in Originalgröße in einem eigenen Tab.
Die Konsole wird bei jedem Lauf geleert, also setze beim Debuggen fleißig console.log ein — die Ausgaben erscheinen sofort, ohne die echte Browser-Konsole zu öffnen.
Verwandte Tools
- JavaScript Verschönerer Kostenloser Online-JavaScript-Verschönerer und Code-Formatierer. Wandeln Sie minifiziertes JS sofort in sauberen, lesbaren und gut eingerückten Code mit anpassbaren Optionen um.
- JS-Minifier JavaScript-Code sofort minifizieren. Leerzeichen, Kommentare entfernen und JS für schnellere Ladezeiten optimieren.
- Regex-Tester Testen und debuggen Sie reguläre Ausdrücke mit Echtzeit-Übereinstimmung und Gruppenerfassung.
- Markdown-Vorschau Kostenloser Online-Markdown-Editor mit Live-Vorschau. Schreiben, rendern und exportieren Sie Markdown mit voller GFM-Unterstützung.
- Hash-Prüfer MD5, SHA-1, SHA-256, SHA-512 Datei-Hashes lokal berechnen und prüfen
- Chmod-Rechner Kostenloser Online-Chmod-Rechner zur Visualisierung und Berechnung von Linux-Dateiberechtigungen mit Kontrollkästchen. Sofortige Umwandlung zwischen numerischer (755, 644) und symbolischer Notation (rwxr-xr-x). Unterstützt Sonderberechtigungen wie setuid, setgid, sticky bit.
- ASCII-Tabelle Vollständige ASCII-Zeichencodierungsreferenz mit Dezimal-, Hexadezimal-, Oktal-, Binärcodes, HTML-Entities und Beschreibungen. Sofortige Suche und Filterung.
- Hex-Betrachter Zeigen Sie Dateiinhalte im Hex-Dump-Format mit Suche, Offset-Navigation und virtuellem Scrollen an