Über dieses Tool
Ein Code-Playground ist der schnellste Weg, eine Idee auszuprobieren: kein Projekt aufsetzen, kein Build-Schritt, kein Server. Tippen Sie HTML, CSS und JavaScript in die drei Felder, und die Vorschau rendert neu, sobald Sie aufhören zu tippen. Ideal, um einen Snippet von Stack Overflow zu testen, eine Komponente zu prototypen oder zu zeigen, wie sich ein Stück Code verhält.
Alles läuft lokal in einem abgeschotteten iframe in Ihrem Browser — Ihr Code wird nirgendwohin hochgeladen. Wenn Sie etwas Passendes haben, laden Sie es als eine eigenständige .html-Datei herunter, die Sie überall öffnen oder in ein Projekt einfügen können.
Häufige Fragen
Wird mein HTML/CSS/JS auf einem Server ausgeführt?
Nein. Alles läuft in Ihrem Browser innerhalb eines sandboxed iframes — es gibt keine serverseitige Ausführung, daher wird nichts, was Sie schreiben, jemals irgendwohin gesendet.
Ist es sicher, im Vorschau-iframe zu experimentieren?
Ja. Die Vorschau läuft mit sandbox="allow-scripts allow-modals", kann also nicht auf die übergeordnete Seite zugreifen, Cookies lesen oder das oberste Fenster navigieren — sie ist vom Rest der Seite isoliert.
Speichert mein Code automatisch?
Ja. HTML, CSS und JS werden etwa 300 ms, nachdem Sie aufgehört haben zu tippen, im lokalen Speicher dieses Browsers gesichert und beim nächsten Öffnen des Playgrounds hier automatisch wiederhergestellt.
Kann ich externe Bibliotheken von einem CDN verwenden?
Sie können ein <script src="https://...">-Tag direkt im HTML-Bereich hinzufügen, um eine CDN-gehostete Bibliothek zu laden, aber es gibt keine npm-/Bundler-Unterstützung — nur das, was ein einfaches <script>-Tag laden kann.
Kann ich meinen Playground als eigenständige Datei speichern?
Ja. Herunterladen bündelt Ihr aktuelles HTML, CSS und JS in einer einzigen .html-Datei mit eingebetteten <style>- und <script>-Tags, die in jedem Browser ohne Server korrekt geöffnet wird.