HTML-, CSS- & JS-Playground

Was das Tool macht

Dieser Playground ist ein kleiner Online-Code-Editor für Frontend-Experimente. Schreib HTML, CSS und JavaScript in drei Tabs mit Syntaxhervorhebung, und die Vorschau aktualisiert sich während der Eingabe – wie CodePen oder JSFiddle, nur ohne Konto. Eine eingebaute Konsole zeigt Ausgaben von console.log() und Fehler mit der Zeilennummer in deinem JavaScript, sodass du ohne Entwicklertools debuggen kannst. Das ist praktisch auf dem Smartphone oder an einem fremden Rechner.

Nutze ihn, um ein CSS-Layout auszuprobieren, einen Bug für Kollegen nachzustellen, ein Snippet von Stack Overflow zu testen, Einsteigern etwas beizubringen oder schnell einen Prototyp zu skizzieren.

So funktioniert es

1. Tippe in den Tabs HTML, CSS und JS oder klicke auf Beispiel, um mit einer kleinen Zähler-Demo zu starten. Ein Punkt auf einem Tab bedeutet, dass er Code enthält.
2. Die Vorschau läuft automatisch 0,6 Sekunden, nachdem du aufgehört hast zu tippen. Schalte Automatisch ausführen bei aufwendigen Skripten aus und klicke auf Ausführen oder drücke Ctrl+Enter, wenn du so weit bist.
3. Behalte die Konsole für Logs, Warnungen und Fehler im Blick; die neueste Zeile steht immer oben. Objekte, Arrays, Maps, Sets und DOM-Elemente werden kompakt und gut lesbar dargestellt.
4. Mit Teilen schickst du den Code an jemanden. ZIP herunterladen speichert index.html, style.css und script.js als einzelne Dateien, bereit für ein echtes Projekt; HTML herunterladen speichert alles als eine index.html-Datei, die sich in jedem Browser öffnen lässt.

Dein Code bleibt in diesem Browser gespeichert und ist also noch da, wenn du zurückkommst. Die Tab-Taste rückt um zwei Leerzeichen ein.

Beispiel

HTML:

<button id="go">Click me</button>

JavaScript:

document.querySelector('#go').addEventListener('click', () => {
  console.log('clicked at', new Date().toLocaleTimeString())
})

Jeder Klick fügt der Konsole eine Zeile hinzu. Vertippst du dich bei einem Namen, zeigt die Konsole einen roten ReferenceError mit der Zeile im JS-Tab, in der er aufgetreten ist.

Wie es funktioniert

Die drei Bereiche werden zu einem HTML-Dokument zusammengefügt und in ein iframe mit dem Attribut sandbox geladen, sodass der Code weder Cookies noch Speicher dieser Website lesen kann. Ein winziges Skript im Frame leitet Konsolenaufrufe und nicht abgefangene Fehler an die Seite weiter, und nichts verlässt dein Gerät.