JPKCom DB

Playground — Manual

Vollständige Funktionsbeschreibung des Playgrounds: die drei Editoren, Live-Vorschau, optionale Assets, Snippets, Export/Import 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, 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.

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).
  • 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.

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.