JPKCom DB

Playground — Manual

Vollständige Funktionsbeschreibung des Playgrounds: die drei Editoren, Live-Vorschau, optionale Assets, Snippets, Export/Import, der PHP-Modus (php-wasm) sowie Architektur und Grenzen.

Zurück zur Übersicht: Playground · Tool live öffnen: www.jpkc.com/tools/playground/

Dieses Manual beschreibt den Playground vollständig: jeden Editor, jede Schaltfläche der Werkzeugleiste, die Optionen der Vorschau, die Persistenz und die Grenzen der Sandbox. Die Oberfläche des Tools ist auf Englisch — die Button- und Label-Bezeichnungen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau der Oberfläche

Die Oberfläche besteht von oben nach unten aus vier Teilen:

  1. Werkzeugleiste (pg-toolbar) — Run/Live, der PHP-Schalter, Snippets, Export/Import, Asset-Auswahl, Panel-Umschalter und Vollbild.
  2. Editor-Reihe — die drei Code-Panels HTML, CSS/SCSS und JavaScript nebeneinander.
  3. Trenner (pg-resizer) — eine ziehbare Leiste, mit der du das Höhenverhältnis zwischen Editor-Reihe und Vorschau verschiebst.
  4. Vorschau (pg-preview) — das gerenderte Ergebnis im <iframe> bzw. die HTML-Quelltext-Ansicht.

Die drei Editoren

Jedes Panel ist ein eigenständiger ACE-Editor mit Syntax-Highlighting im Theme „Dracula". Voreinstellungen: Schriftgröße 13, Tab-Breite 2 (weiche Tabs), kein Zeilenumbruch, ohne Autovervollständigung. Eine Änderung in irgendeinem Editor löst zwei Dinge aus: das automatische Speichern (siehe unten) und — wenn Live aktiv ist — eine neue Vorschau.

HTML-Editor

Das linke Panel (Label HTML) nimmt den Body-Inhalt deiner Seite auf. Was du hier schreibst, landet im <body> des Vorschau-Dokuments — du brauchst also kein <!DOCTYPE>, kein <html>- und kein <head>-Gerüst, das setzt der Playground selbst. Du kannst hier auch eigene <script src="…">- oder <link>-Tags von einem CDN einsetzen, wenn du eine Bibliothek brauchst, die nicht im Asset-Dropdown steht.

CSS- / SCSS-Editor

Das mittlere Panel (Label CSS) nimmt deine Stile auf, die der Playground in einen <style>-Block im <head> der Vorschau schreibt. Über den SCSS-Schalter rechts im Panel-Header stellst du den Editor auf SCSS um — das Label wechselt dann auf SCSS, und der Inhalt wird vor jeder Vorschau clientseitig zu CSS kompiliert.

Der SCSS-Compiler (eine sass.js-Bibliothek) wird beim ersten SCSS-Lauf nachgeladen; du siehst kurz den Hinweis „Loading SCSS compiler…". Kompiliert wird im expandierten Stil. Ein Syntaxfehler im SCSS bricht die Vorschau nicht ab: Du bekommst eine Fehlermeldung mit Zeilennummer, und in der Vorschau steht ein CSS-Kommentar mit dem Fehlertext statt der Stile.

JavaScript-Editor

Das rechte Panel (Label JavaScript) nimmt dein Skript auf. Der Playground platziert deinen JS-Code am Ende des <body>, damit das DOM beim Ausführen schon vollständig geparst ist und du ohne DOMContentLoaded auskommst. Funktionsdeklarationen auf oberster Ebene landen im globalen Gültigkeitsbereich — deshalb funktionieren auch Inline-Handler wie onclick="meineFunktion()" aus dem HTML-Panel. Dein Skript läuft in einem try/catch-Block: Ein Laufzeitfehler legt die Vorschau nicht lahm, sondern wird in der Browser-Konsole als [Playground JS] ausgegeben.

Pro-Panel-Aktionen

Jedes der drei Panels hat im Header dieselben Aktionen:

  • Schriftgröße — Minus/Plus ändern die Editor-Schriftgröße dieses Panels (Bereich 10–26, Standard 13); der aktuelle Wert steht dazwischen.
  • Copy — kopiert den gesamten Inhalt des Panels in die Zwischenablage.
  • Download — lädt den Inhalt als Datei herunter (playground.html, playground.css bzw. playground.scss, playground.js). Ein leeres Panel meldet „Editor is empty."
  • Clear (Papierkorb) — leert das Panel.

Ausführung: Live-Modus und Run

Wie die Vorschau aktualisiert wird, steuern zwei Bedienelemente links in der Werkzeugleiste:

  • Run (grüner Button, Strg/Cmd+Enter) — baut die Vorschau sofort neu, unabhängig vom Live-Modus.
  • Live (Checkbox, standardmäßig an) — ist sie aktiv, wird die Vorschau beim Tippen automatisch neu gebaut, leicht verzögert (entprellt), damit nicht jeder Tastenanschlag sofort rendert. Schaltest du Live aus, aktualisiert nur noch der Run-Button.

Nach jedem Lauf erscheint im Vorschau-Header kurz ein Status „Updated" mit Uhrzeit.

Die Vorschau

Die Vorschau rendert ein vollständiges HTML-Dokument, das der Playground aus deinen drei Editoren zusammensetzt: dein HTML in den <body>, dein (kompiliertes) CSS in einen <style>-Block, dein JS ans Ende des <body>. Schließende </style>- und </script>-Literale in deinem Code werden dabei maskiert, damit sie die umgebenden Blöcke nicht vorzeitig schließen.

Rendered Preview und HTML Source

Rechts im Vorschau-Header schaltest du zwischen zwei Ansichten um:

  • Rendered Preview (Augen-Symbol) — das gerenderte Ergebnis im <iframe>.
  • HTML Source (Code-Symbol) — der vollständige, generierte HTML-Quelltext des Vorschau-Dokuments als Text. Praktisch, um zu sehen, was der Playground tatsächlich an den Browser gibt — inklusive der eingebundenen Assets.

Zoom

Mit Minus/Plus im Vorschau-Header zoomst du die Vorschau in festen Stufen zwischen 25 % und 200 % (25, 33, 50, 67, 75, 100, 125, 150, 200 %). Der Zoom skaliert nur die Darstellung; das Vorschau-Dokument selbst rendert weiterhin in voller Auflösung. Nützlich, um eine ganze Seite im Überblick zu sehen oder Details zu vergrößern.

In neuem Tab öffnen

Der Button mit dem Pfeil-Symbol (Open preview in new tab) öffnet das aktuelle Vorschau-Dokument in einem eigenen Browser-Tab — dort läuft es als normale Seite, ohne die Sandbox-Beschränkungen des eingebetteten <iframe>. Wird der Tab vom Popup-Blocker verhindert, erscheint ein entsprechender Hinweis.

Optionale Assets

Über das Assets-Dropdown (Ebenen-Symbol) blendest du gängige Front-End-Bibliotheken in die Vorschau ein, ohne sie selbst zu verlinken. Ein Zähler-Badge am Button zeigt, wie viele aktiv sind. Verfügbar sind:

  • Bootstrap CSS — das Bootstrap-5.3-Stylesheet (im <head>).
  • Bootstrap JS — das Bootstrap-5.3-JS-Bundle inklusive Popper (für Komponenten wie Modals, Dropdowns, Tooltips).
  • Bootstrap Icons — das Icon-Set Bootstrap Icons 1.11.
  • jQuery — jQuery 4.0 (im <head>, also für dein JS verfügbar).
  • Dark Mode — setzt data-bs-theme="dark" auf das <html> der Vorschau. Diese Option ist nur wählbar, wenn Bootstrap CSS aktiv ist; schaltest du Bootstrap CSS aus, wird Dark Mode automatisch deaktiviert.

Die CSS-Assets landen als <link> im <head>, die JS-Assets als <script> ebenfalls im <head>, damit sie verfügbar sind, sobald der Body geparst wird. Die Asset-Auswahl wird mitgespeichert und ist Teil von Snippets und Export.

Speichern und Wiederherstellen

Automatisches Speichern (LocalStorage)

Der Playground sichert deinen Stand laufend im LocalStorage deines Browsers — kurz verzögert nach dem Tippen. Gespeichert werden HTML, CSS und JS, der CSS-Modus (CSS/SCSS), die Asset-Auswahl, die Panel-Sichtbarkeit, die Schriftgrößen und die Zoomstufe. Kommst du später zurück, ist dein letzter Stand wieder da. Beim allerersten Besuch (oder nach einem Reset) liegt ein kleines Demo-Beispiel in den Editoren.

Snippets (benannte Slots)

Über Snippets (Disketten-Symbol) öffnest du einen Dialog, in dem du den aktuellen Stand unter einem Namen ablegst. Es lassen sich bis zu acht Snippets speichern, jeweils mit HTML, CSS, JS, CSS-Modus, Asset-Auswahl und Speicherdatum. Ein bereits vergebener Name überschreibt den vorhandenen Eintrag. Ist das Limit erreicht, musst du erst einen löschen. In der Liste siehst du pro Snippet Name, Datum und die Zeichenzahl je Panel sowie die Buttons Load und Del. Auch die Snippets liegen im LocalStorage.

Reset

Der Reset-Button (Kreispfeil, Reset to defaults) setzt nach einer Rückfrage alle Editoren, den CSS-Modus, die Assets, die Panel-Sichtbarkeit, die Schriftgrößen und den Zoom auf die Werksvorgaben zurück und lädt das Demo-Beispiel. Gespeicherte Snippets bleiben dabei erhalten — Reset räumt nur den aktuellen Arbeitsstand auf.

Export und Import

Export HTML

Export HTML lädt den kompletten aktuellen Stand als eigenständige .html-Datei (playground.html) herunter — ein vollständiges Dokument mit deinem HTML, dem (kompilierten) CSS, deinem JS und den aktiven Assets. Die Datei läuft auch außerhalb des Playgrounds in jedem Browser. Zusätzlich enthält sie unsichtbare Marker (@@playground-…@@-Kommentare und die Asset-Auswahl als JSON), an denen der Playground sie später wiedererkennt.

Import HTML

Import HTML liest eine zuvor exportierte Playground-Datei wieder ein: Der Playground sucht die Marker, extrahiert HTML, CSS und JS zurück in die jeweiligen Editoren und stellt die gespeicherte Asset-Auswahl wieder her. Eine Datei ohne diese Marker wird abgelehnt — importierbar sind also nur Dateien, die aus diesem Playground exportiert wurden, nicht beliebiges HTML.

PHP-Modus (In-Browser-PHP)

Über den PHP-Schalter links in der Werkzeugleiste (neben Run/Live) verwandelst du den Playground in einen vollwertigen PHP-Editor. Aktivierst du ihn, läuft im Browser ein echtes PHP 8.4 — über php-wasm (eine WebAssembly-Portierung von PHP, Apache-2.0). Es gibt keinen Server, dein Code wird nirgendwohin geschickt.

Was sich im PHP-Modus ändert

Sobald der Schalter an ist, passt sich die Oberfläche an:

  • Das HTML-Panel heißt jetzt HTML+PHP und schaltet sein Syntax-Highlighting auf PHP um. Hier schreibst du gemischten HTML+PHP-Code, genau wie in einer .php-Datei — literaler Text außerhalb von <?php … ?> wird ausgegeben, der PHP-Code dazwischen ausgeführt.
  • Aus dem Run-Button wird Run PHP, und die Live-Checkbox verschwindet: Im PHP-Modus gibt es keine automatische Vorschau beim Tippen, du baust immer gezielt per Run PHP (oder Strg/Cmd+Enter).
  • Ein neuer Button PHP Log taucht auf (siehe unten).

CSS- und JavaScript-Panel bleiben, wie sie sind: Der Playground legt deine Stile und Skripte wie im Normalmodus um den PHP-Output herum. Du musst dafür nichts Besonderes in deinen PHP-Code schreiben.

Wie die PHP-Vorschau entsteht

Beim Klick auf Run PHP führt der Playground den HTML+PHP-Code aus und nimmt dessen Ausgabe (das, was PHP an HTML produziert). Daraus baut er — wie im Normalmodus — ein vollständiges Vorschau-Dokument: dein CSS in einen <style>-Block, dein JS ans Body-Ende, die aktiven Assets in den <head>. Gibt dein PHP bereits ein komplettes HTML-Dokument (<!doctype>/<html>) aus, fügt der Playground Stile, Skripte und Assets passend an den richtigen Stellen ein; andernfalls behandelt er die Ausgabe als Body-Fragment. Das Ergebnis landet in derselben abgeschotteten Vorschau wie sonst.

Run PHP statt Live — und warum

Anders als HTML/CSS/JS läuft PHP per WebAssembly auf dem Haupt-Thread des Browsers, nicht in einem Hintergrund-Worker. Das hat einen Preis: Eine echte PHP-Endlosschleife (while (true)) würde den Tab blockieren, weil WebAssembly synchron läuft und nicht von außen abgebrochen werden kann. Genau deshalb ersetzt der PHP-Modus die Live-Vorschau durch den manuellen Run PHP-Button — du behältst die Kontrolle, wann Code ausgeführt wird, und tippst nie versehentlich eine laufende Endlosschleife los.

PHP Log (Fehlerprotokoll)

Damit die Vorschau frei von Fehler-Markup bleibt, ist PHP so konfiguriert, dass es Fehler nicht in die Ausgabe schreibt, sondern protokolliert (display_errors=Off, log_errors=On, error_reporting=E_ALL). Den Inhalt dieses Protokolls zeigt der Button PHP Log in einem Dialog: alle Warnungen, Notices, Fatals und Parse-Fehler des letzten Laufs — plus deine eigenen error_log()-Aufrufe, jeweils mit korrekter Zeilennummer. Ein roter Zähler-Badge am Button zeigt an, wie viele Zeilen das Protokoll enthält. Bleibt die Ausgabe leer, weist dich ein kurzer Hinweis auf das Log hin.

Laden und Entladen

Die PHP-Engine ist groß (rund 13 MB WebAssembly) und wird daher erst beim Aktivieren des PHP-Modus nachgeladen (bzw. spätestens beim ersten Run PHP) — nicht schon beim Öffnen der Seite. Dass der PHP-Modus an war, merkt sich der Playground; nach einem Reload lädt er die Engine dann automatisch nach. Schaltest du PHP wieder aus, gibt der Playground die Engine frei.

Export, Import und Snippets im PHP-Modus

Auch der PHP-Stand lässt sich sichern, mit ein paar Besonderheiten:

  • Export HTML schreibt im PHP-Modus den rohen HTML+PHP-Quelltext in die Datei (playground.php.html) und vermerkt darin, dass es sich um PHP handelt. Diese Datei kannst du wieder importieren — sie ist aber, anders als ein normaler Export, nicht als fertige Seite im Browser lauffähig (sie enthält unausgeführtes PHP).
  • Beim Import einer solchen Datei erkennt der Playground das PHP-Kennzeichen und schaltet den PHP-Modus automatisch wieder ein.
  • Snippets speichern den PHP-Modus mit; lädst du ein PHP-Snippet, ist der Modus wieder aktiv.
  • Der Download des HTML+PHP-Panels speichert entsprechend als .php-Datei.

Voraussetzungen und Grenzen

  • Einmaliger Download. Beim ersten Aktivieren werden rund 13 MB geladen — das braucht eine Internetverbindung und einen Moment. Danach ist die Engine im Browser-Cache.
  • Kein Server-Umfeld. Es läuft PHP selbst, aber ohne Webserver, ohne Datenbank und ohne Dateisystem-Zugriff auf deinen Rechner. Gedacht ist der Modus zum Ausprobieren von PHP-Logik, Funktionen und Snippets — nicht als Ersatz für eine echte PHP-Umgebung.
  • Endlosschleifen blockieren den Tab. Siehe oben — führe verdächtige Schleifen bewusst und kontrolliert per Run PHP aus.

Layout: Panels, Trenner, Vollbild

  • Panels — die Schalter HTML, CSS, JS (Gruppe Panels:) blenden einzelne Editoren aus oder ein. So konzentrierst du dich z. B. nur auf CSS und gibst der Vorschau mehr Platz. Sind alle drei aus, klappt die Editor-Reihe ganz zusammen.
  • Trenner — die Leiste zwischen Editoren und Vorschau lässt sich mit der Maus nach oben oder unten ziehen, um das Höhenverhältnis zu ändern.
  • Vollbild — der Fullscreen-Button (F11) maximiert den Playground; Esc oder erneut F11 verlässt den Modus wieder.

Tastatur-Kürzel

  • Strg/Cmd + Enter — Vorschau neu bauen (Run; im PHP-Modus Run PHP).
  • F11 — Vollbild ein/aus.
  • Esc — Vollbild verlassen.

Architektur, Sandbox und Grenzen

Der Playground ist rein clientseitig. Dein Code wird nicht an einen Server geschickt; die Vorschau wird im Browser zusammengebaut und in ein sandbox-<iframe> geladen. Die Sandbox erlaubt gezielt allow-scripts, allow-forms, allow-modals und allow-popups — also genug, damit dein JS, Formulare, prompt/alert und Popups funktionieren — aber nicht den Zugriff auf die Hauptseite. Damit kann der Vorschau-Code den Playground und deine Daten dort nicht erreichen. Auch die SCSS-Kompilierung läuft lokal über die nachgeladene sass.js-Bibliothek.

Daraus ergeben sich ein paar Grenzen, die du kennen solltest:

  • Externe Assets brauchen Netz. Bindest du im HTML-Panel eine CDN-Bibliothek ein, lädt der Browser sie zur Laufzeit — das funktioniert nur online und unterliegt den CORS-/Lade-Regeln des jeweiligen Anbieters.
  • Speicher ist browser- und gerätegebunden. Auto-Save und Snippets liegen im LocalStorage. Anderer Browser, anderes Gerät, privater Modus oder geleerte Browserdaten bedeuten: Dein Stand ist dort nicht vorhanden bzw. weg. Für dauerhafte Aufbewahrung nutze Export HTML.
  • Acht Snippet-Plätze. Mehr als acht benannte Snippets gehen nicht; weitere musst du als Datei exportieren.
  • Der „neue Tab" ist nicht sandboxed. Über Open preview in new tab geöffneter Code läuft als normale Seite ohne die <iframe>-Beschränkungen — sinnvoll fürs vollwertige Testen, aber sei dort entsprechend vorsichtig mit fremdem Code.
  • Import nur für Playground-Dateien. Nur per Export HTML erzeugte Dateien (mit Markern) lassen sich re-importieren.
  • PHP läuft außerhalb der Sandbox. Im PHP-Modus wird PHP per WebAssembly auf dem Haupt-Thread ausgeführt (nicht im <iframe>); nur sein HTML-Output wandert in die Sandbox. Eine PHP-Endlosschleife kann daher den Tab blockieren — mehr dazu im PHP-Modus.

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite. Konkrete Durchläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.