JPKCom DB

Playground — Beispiele

Praxisnahe Durchläufe mit dem Playground: eine Komponente bauen, einen CSS-Effekt testen, ein JS-Snippet ausprobieren, Bootstrap prototypen, SCSS und PHP verproben, exportieren.

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

Das Manual erklärt jede Funktion im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch — Button- und Label-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Eine kleine Komponente bauen

Du willst eine in sich geschlossene UI-Komponente — etwa eine Profilkarte — schnell zusammenstecken.

  1. Öffne den Playground und leere mit Clear die drei Panels (oder bau direkt auf dem Demo-Beispiel auf).
  2. Ins HTML-Panel kommt nur der Body-Inhalt — kein <html>/<head>-Gerüst:
<article class="card">
    <img src="https://placehold.co/64" alt="Avatar" width="64" height="64">
    <div>
        <h2>Ada Lovelace</h2>
        <p>Erste Programmiererin</p>
    </div>
</article>
  1. Ins CSS-Panel die Stile:
.card {
    display: flex;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    border: 1px solid #ddd;
    border-radius: 12px;
    font-family: system-ui, sans-serif;
}
.card img { border-radius: 50%; }
.card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.card p  { margin: 0; color: #666; }
  1. Weil Live aktiv ist, erscheint die Karte sofort rechts in der Vorschau — jede Änderung schlägt nach kurzer Verzögerung durch. Passt das Ergebnis, kopierst du HTML und CSS per Copy in dein Projekt.

Beispiel 2: Einen CSS-Effekt testen

Du willst einen Hover- oder Transition-Effekt isoliert ausprobieren, ohne ihn in einer großen Codebasis zu suchen.

  1. Lass das JS-Panel leer und blende es bei Bedarf über den JS-Panel-Schalter aus — so hast du mehr Platz für CSS und Vorschau.
  2. Bau im HTML-Panel ein minimales Testobjekt, z. B. <button class="cta">Klick mich</button>.
  3. Im CSS-Panel experimentierst du mit dem Effekt:
.cta {
    padding: 0.8rem 1.6rem;
    border: none;
    border-radius: 8px;
    background: #0d6efd;
    color: #fff;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}
  1. Fahr in der Rendered Preview mit der Maus über den Button — der Hover-Effekt läuft live. Über den Zoom im Vorschau-Header vergrößerst du das Detail, um die Schatten-Feinheiten zu beurteilen. So drehst du an Werten (Dauer, Versatz, Farbe), bis es sitzt.

Beispiel 3: Ein JS-Snippet ausprobieren

Du willst ein Stück JavaScript verproben, das das DOM verändert.

  1. Im HTML-Panel ein Ziel und ein Auslöser:
<button onclick="zaehle()">Zähler: <span id="n">0</span></button>
  1. Im JavaScript-Panel die Logik. Funktionen auf oberster Ebene sind global, deshalb funktioniert der onclick-Handler aus dem HTML direkt:
let count = 0;
function zaehle() {
    count += 1;
    document.getElementById( 'n' ).textContent = count;
}
  1. Klick in der Vorschau auf den Button — der Zähler steigt. Dein Code läuft am Ende des <body>, das DOM ist also schon da; ein DOMContentLoaded brauchst du nicht.
  2. Baust du absichtlich einen Fehler ein, bleibt die Vorschau stehen statt abzustürzen: Öffne die Browser-Konsole, dort steht die Meldung mit dem Präfix [Playground JS]. So debuggst du Snippets, ohne ein Projekt anzulegen.

Beispiel 4: Eine Bootstrap-Komponente prototypen

Du willst eine Bootstrap-Komponente (z. B. ein Modal) ausprobieren, ohne Bootstrap selbst einzubinden.

  1. Öffne das Assets-Dropdown und aktiviere Bootstrap CSS und Bootstrap JS — interaktive Komponenten wie Modals brauchen beides. Der Zähler-Badge am Button zeigt jetzt 2.
  2. Optional schaltest du Bootstrap Icons dazu und probierst über Dark Mode (nur wählbar, wenn Bootstrap CSS an ist) das dunkle Theme.
  3. Ins HTML-Panel kommt das Bootstrap-Markup — Trigger-Button plus Modal-Struktur mit data-bs-toggle="modal". Weil Bootstrap JS im <head> der Vorschau eingebunden ist, funktioniert das Modal sofort beim Klick.
  4. So prüfst du in Sekunden, ob eine Komponente das tut, was du brauchst — bevor du Bootstrap in dein echtes Projekt aufnimmst. Mehr zu den verfügbaren Bibliotheken steht im Manual unter „Optionale Assets".

Beispiel 5: SCSS verproben

Du willst SCSS-Features (Verschachtelung, Variablen) testen, ohne lokal einen Sass-Compiler einzurichten.

  1. Klick im CSS-Panel auf den SCSS-Schalter im Header — das Label wechselt auf SCSS. Beim ersten Lauf wird der Compiler kurz nachgeladen („Loading SCSS compiler…").
  2. Schreib SCSS, z. B. mit Variable und Verschachtelung:
$accent: #d6336c;

.note {
    padding: 1rem;
    border-left: 4px solid $accent;
    h3 { color: $accent; margin-top: 0; }
}
  1. Der Playground kompiliert das SCSS vor jeder Vorschau clientseitig zu CSS — das Ergebnis siehst du sofort. Schaltest du im Vorschau-Header auf HTML Source, erkennst du im <style>-Block das fertig kompilierte CSS.
  2. Baust du einen SCSS-Syntaxfehler ein, bricht nichts ab: Es erscheint eine Fehlermeldung mit Zeilennummer, und in der Vorschau steht ein CSS-Kommentar mit dem Fehlertext. So findest du den Fehler, ohne die Konsole zu bemühen.

Beispiel 6: Stand sichern und als Datei weitergeben

Du hast etwas gebaut, das du behalten oder jemandem schicken willst.

  1. Innerhalb des Playgrounds behalten: Öffne Snippets, gib einen Namen ein und klick auf Save. Der Stand (HTML, CSS, JS, CSS-Modus, Assets) liegt jetzt als benanntes Snippet im Browser; über Load holst du ihn jederzeit zurück. Bis zu acht Snippets sind möglich.
  2. Als eigenständige Datei sichern oder teilen: Klick auf Export HTML. Du bekommst eine playground.html — ein vollständiges Dokument, das in jedem Browser läuft, mit deinem Code und den aktiven Assets.
  3. Wieder einlesen: Über Import HTML lädst du eine zuvor exportierte Datei zurück in die Editoren; auch die Asset-Auswahl wird wiederhergestellt. So setzt eine Kollegin auf deinem Stand auf, ohne dass etwas über einen Server laufen muss.
  4. Achtung: Importieren lassen sich nur aus dem Playground exportierte Dateien (sie tragen unsichtbare Marker) — beliebiges HilfsHTML wird abgelehnt. Details dazu im Manual unter „Export und Import".

Beispiel 7: PHP im Browser ausführen

Du willst ein Stück PHP-Logik ausprobieren — eine Funktion, eine Schleife, ein bisschen String-Verarbeitung — ohne lokal einen PHP-Server aufzusetzen.

  1. Aktiviere in der Werkzeugleiste den PHP-Schalter. Beim ersten Mal lädt kurz die PHP-Engine nach (rund 13 MB, einmalig). Das HTML-Panel heißt jetzt HTML+PHP, und aus Run wird Run PHP.
  2. Ins HTML+PHP-Panel kommt gemischter HTML+PHP-Code — wie in einer .php-Datei:
<?php
$names = [ 'Ada', 'Alan', 'Grace' ];
?>
<h1>Hallo aus PHP <?= phpversion() ?></h1>
<ul>
<?php foreach ( $names as $name ): ?>
    <li><?= htmlspecialchars( $name ) ?></li>
<?php endforeach; ?>
</ul>
  1. Klick auf Run PHP (oder Strg/Cmd+Enter). PHP führt den Code aus, und die erzeugte HTML-Ausgabe erscheint in der Vorschau — inklusive der echten PHP-Versionsnummer.
  2. CSS und JavaScript kannst du wie gewohnt in ihren Panels ergänzen; der Playground legt sie um die PHP-Ausgabe herum. Eine Live-Vorschau gibt es im PHP-Modus nicht — nach jeder Änderung baust du gezielt per Run PHP neu.
  3. Baust du einen Fehler ein (etwa einen Tippfehler im Funktionsnamen), bleibt die Vorschau sauber: Öffne PHP Log in der Werkzeugleiste — dort stehen Warnungen, Notices und Fehler des letzten Laufs mit Zeilennummer. Ein roter Badge am Button zeigt die Anzahl. Mehr dazu im Manual unter „PHP-Modus".

Noch tiefer: das Manual für jede Funktion und jede Grenze, die Tipps & Tricks für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.