JPKCom DB

Playground — Beispiele

Durchläufe mit dem Playground: Komponente bauen, CSS-Effekt testen, JS ausprobieren, Bootstrap prototypen, SCSS mit Dart Sass 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:
html
<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:
css
.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 in der Vorschau unter den Editoren — 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:
css
.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 der Seite: Ein Fehler, der schon beim Laden passiert — etwa document.getElementById( 'fehlt' ).textContent = 0; auf oberster Ebene —, steht dort mit dem Präfix [Playground JS]. Ein Fehler, der erst beim Klick in zaehle() auftritt, erscheint als normale Fehlermeldung ohne Präfix. So debuggst du Snippets, ohne ein Projekt anzulegen.
  3. Schreibst du zaehle stattdessen als Pfeilfunktion (const zaehle = () => { … }), findet der onclick-Handler sie nicht: Der Playground steckt dein JS in einen try-Block, und let/const gelten nur darin. Bleib für Inline-Handler bei function — oder binde den Klick im JS per addEventListener.

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, Sass-Module) 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 Dart Sass kurz nachgeladen („Loading SCSS compiler…").
  2. Ins HTML-Panel kommt ein Testobjekt, etwa <div class="note"><h3>Hinweis</h3><p>Text</p></div>.
  3. Schreib SCSS, z. B. mit Variablen, Verschachtelung und den eingebauten Modulen sass:math und sass:color:
scss
@use 'sass:math';
@use 'sass:color';

$accent: #d6336c;
$space: 1.5rem;

.note {
    padding: math.div($space, 2) $space;
    border-left: 4px solid $accent;
    background: color.scale($accent, $lightness: 90%);
    h3 { color: color.adjust($accent, $lightness: -10%); margin-top: 0; }
}
  1. Der Playground kompiliert das SCSS vor jeder Vorschau im Browser zu CSS — das Ergebnis siehst du sofort. Schaltest du im Vorschau-Header auf HTML Source, erkennst du im <style>-Block das fertig kompilierte CSS: Aus math.div($space, 2) ist 0.75rem geworden, und die Farbfunktionen sind ausgerechnet — Dart Sass schreibt solche berechneten Farben als rgb() mit Prozentwerten.
  2. Baust du einen Fehler ein — etwa einen Tippfehler wie math.dvi —, bricht nichts ab: Es erscheint die Meldung SCSS error (line 8): Undefined function., und in der Vorschau steht ein CSS-Kommentar mit dem Fehlertext. So findest du den Fehler, ohne die Konsole zu bemühen.
  3. Eine Grenze: Eigene Partials per @use 'variablen' gibt es nicht, nur die eingebauten sass:-Module. Und Warnungen sowie @debug-Ausgaben bleiben im Playground stumm — dafür ist der Compiler da.

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- und PHP-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 mit deinem Code, das in jedem Browser läuft. Aktive Assets bettet es nicht ein, sondern verlinkt sie vom JPKCom-Server; für sie braucht die Datei also eine Netzverbindung. Arbeitest du mit SCSS, enthält die Datei das kompilierte CSS; den SCSS-Quelltext sicherst du zusätzlich per Snippet oder über den Download im CSS-Panel (playground.scss).
  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 HTML 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. Den Inhalt des Panels führt der Playground beim Einschalten gleich einmal aus.
  2. Ins HTML+PHP-Panel kommt gemischter HTML+PHP-Code — wie in einer .php-Datei:
php
<?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. Jeder Lauf startet mit frischem Interpreter; Variablen aus dem vorigen Lauf sind dann nicht mehr da.
  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.