JPKCom DB

Playground — Beispiele

Praxisnahe Durchläufe mit dem Playground: eine Komponente bauen, einen CSS-Effekt testen, ein JS-Snippet ausprobieren, Bootstrap prototypen, 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".

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.