Dein Code läuft nur in deinem Browser, in einem abgeschotteten Frame ohne Zugriff auf diese Seite. Code aus einem geteilten Link läuft ebenfalls, also bei unbekannter Quelle erst lesen.
Öffnet im CSS-Tab mit Beispiel-HTML zum Gestalten. Selektoren, Custom Properties, Flexbox- und Grid-Layouts, Transitions, Keyframe-Animationen und Media Queries ausprobieren und die Wirkung sofort sehen. Am Ende alles als eine .html-Datei exportieren.
Anleitung
- HTML, CSS und JavaScript in den Tabs schreiben. Mit „Auto“ lädt das Ergebnis kurz nach dem Tippen neu; sonst auf „Ausführen“ tippen.
- console.log, warn, error, info und table erscheinen in der Konsole unter dem Ergebnis. Unbehandelte Fehler zeigen die Zeile; antippen, um dorthin zu springen.
- Mit einer Vorlage starten: einfache Seite, Canvas-Animation oder JavaScript-Konsolenbeispiel.
- Teilen-Link kopieren (der Code steckt komprimiert im Link selbst) oder alles als eine .html-Datei herunterladen.
- Das Ergebnis läuft in einem abgeschotteten iframe ohne Same-Origin-Zugriff: Es kann weder diese Seite noch Cookies oder Speicher lesen, und nichts wird hochgeladen.
- Dein Code wird nur in diesem Browser gespeichert. Ein geteilter Link lädt stattdessen dessen Code.
- Links speichern den Code nach dem #, damit er nie einen Server erreicht; sehr langer Code ergibt sehr lange Links, die manche Apps kürzen.
- Fügst du ein komplettes HTML-Dokument ein, kommt das CSS in dessen head und das JavaScript vor </body>.
Wofür er gut ist
Damit testest du einen CSS-Trick, bevor er ins Projekt wandert, baust einen Bug in wenigen Zeilen für Kollegen oder ein Forum nach, entwirfst eine Komponente als Prototyp, unterrichtest Web-Grundlagen oder probierst eine API mit fetch aus. Jeder Tab enthält eine Sprache, das Ergebnis lädt kurz nach dem Tippen neu; bei rechenintensiven Skripten Auto-Run abschalten und gezielt ausführen.
console.log, info, warn, error und console.table erscheinen unter dem Ergebnis, und unbehandelte Fehler sowie abgelehnte Promises stehen mit Zeilennummer da; ein Tipp springt zur Stelle im Code.
So funktioniert die Sandbox
Deine Seite läuft in einem abgeschotteten iframe ohne Same-Origin-Zugriff. Sie kann weder Speicher noch Cookies dieser Website lesen, und eine Endlosschleife oder ein Absturz betrifft nur die Vorschau. Netzwerkanfragen deines Codes gehen wie bei jeder Webseite vom Browser aus; sonst wird nichts gesendet. Modernes JavaScript mit async/await und fetch-Aufrufen funktioniert wie auf einer normalen Seite.
Teilen und Speichern
Der Editor merkt sich deinen letzten Code in diesem Browser. Ein Teilen-Link komprimiert alle drei Tabs in den Teil der URL hinter dem #, den Browser nie an den Server schicken; sehr langer Code ergibt sehr lange Links, die manche Messenger abschneiden. Mit dem .html-Download erhältst du eine eigenständige Datei, die in jedem Browser läuft.
Häufige Fragen
Brauche ich ein Konto, um meinen Code zu speichern?
Nein. Der Code wird automatisch in diesem Browser gespeichert. Für ein anderes Gerät oder zum Teilen den Link kopieren oder die .html-Datei herunterladen.
Können andere meinen Code sehen?
Nur, wenn du ihnen den Link schickst. Der Code liegt in deinem Browser und im Link hinter dem #, der an keinen Server übertragen wird.
Kann ich externe Bibliotheken wie React oder jQuery nutzen?
Ja. Im HTML-Tab ein script- oder link-Tag auf ein CDN setzen, wie auf einer normalen Seite. Die Vorschau lädt es beim Ausführen aus dem Netz.
Warum funktionieren localStorage oder Cookies in meinem Code nicht?
Die Vorschau läuft in einem abgeschotteten iframe ohne Same-Origin-Zugriff, Speicher und Cookies sind dort gesperrt oder getrennt. Das hält den Editor sicher; solchen Code auf einer normalen Seite testen.
Wie sehe ich Fehler in meinem JavaScript?
Unbehandelte Fehler und fehlgeschlagene Promises erscheinen in der Konsole unter dem Ergebnis mit Zeilennummer. Ein Tipp auf die Meldung springt zur Zeile im JS-Tab.
Was passiert, wenn ich ein ganzes HTML-Dokument einfüge?
Der Editor behält dein Dokument und setzt das CSS in dessen head und das JavaScript direkt vor </body>. Vollständige Seiten funktionieren also unverändert.