JPKCom DB

Playground

Was der Playground kann und wie HTML-, CSS/SCSS- und JavaScript-Editor mit Live-Vorschau zusammenspielen — Einstieg zu Manual, Beispielen und Tipps.

Front-End-Code direkt im Browser ausprobieren

Der Playground ist ein interaktiver HTML-, CSS- und JavaScript-Editor mit Live-Vorschau. Du schreibst Code in drei nebeneinanderliegenden Editor-Panels — HTML, CSS (wahlweise SCSS) und JavaScript — und siehst das Ergebnis sofort in einer gerenderten Vorschau daneben. Kein lokales Setup, kein Build-Schritt, kein Account: Du öffnest die Seite und legst los.

Das löst ein alltägliches Problem: Du willst eine kleine Komponente, einen CSS-Effekt oder ein JS-Snippet schnell ausprobieren, ohne dafür ein Projekt aufzusetzen, eine Datei anzulegen und den Browser neu zu laden. Genau dafür ist der Playground gedacht — als Skizzenblock für Front-End-Code, der zwischen Idee und fertigem Schnipsel keine Reibung mehr lässt.

Gedacht ist das Tool für alle, die im Browser etwas bauen oder lernen: Entwicklerinnen und Entwickler, die eine Idee verproben oder einen Bug isolieren wollen; Lernende, die HTML/CSS/JS Schritt für Schritt ausprobieren und das Ergebnis sofort sehen möchten; und alle, die jemandem ein lauffähiges Mini-Beispiel zeigen oder als Datei weitergeben wollen. Alles läuft lokal in deinem Browser.

Was der Playground kann — auf einen Blick

Die Funktionen gruppieren sich in vier Bereiche:

  • Drei Code-Editoren — je ein ACE-Editor für HTML, CSS/SCSS und JavaScript, mit Syntax-Highlighting (Theme „Dracula"). Pro Panel kannst du die Schriftgröße ändern sowie den Inhalt kopieren, herunterladen oder leeren. Der CSS-Editor hat einen SCSS-Schalter, der den Inhalt vor der Vorschau clientseitig zu CSS kompiliert.
  • Live-Vorschau — eine gerenderte Vorschau in einem abgeschotteten <iframe>. Im Live-Modus (Standard) aktualisiert sie sich automatisch beim Tippen; alternativ baust du sie per Run-Button oder Strg/Cmd+Enter neu. Du kannst die Vorschau zoomen, zwischen Rendered Preview und HTML Source umschalten und sie in einem neuen Tab öffnen.
  • Optionale Assets — per Dropdown blendest du Bootstrap CSS, Bootstrap JS, Bootstrap Icons, jQuery und einen Bootstrap-Dark-Mode in die Vorschau ein, ohne sie selbst einzubinden.
  • Speichern, Teilen, Layout — Inhalte werden automatisch im Browser gesichert (LocalStorage); bis zu acht benannte Snippets lassen sich ablegen und wieder laden. Den kompletten Stand exportierst du als eigenständige HTML-Datei (Export HTML) und liest ihn später per Import HTML zurück. Dazu: Panels ein- und ausblenden, Editor/Vorschau per Trenner größer ziehen und ein Vollbild-Modus.

Architektur: alles im Browser

Der Playground ist ein rein clientseitiges Tool. Dein Code verlässt deinen Rechner nicht: Die Vorschau wird aus deinen drei Editoren zu einem vollständigen HTML-Dokument zusammengesetzt und in ein sandbox-<iframe> geladen, das im selben Browser läuft. Auch die SCSS-Kompilierung passiert lokal (über eine nachgeladene JavaScript-Bibliothek), nicht auf einem Server. Vom JPKCom-Server kommen nur die optionalen Assets (Bootstrap, jQuery) — und nur, wenn du sie einschaltest.

Das Sandbox-<iframe> erlaubt bewusst nur das Nötige (Skripte, Formulare, Dialoge, Popups), läuft aber ohne Zugriff auf die Hauptseite — dein Code kann den Playground also nicht aushebeln. Details und Grenzen dazu stehen im Manual.

Jetzt ausprobieren

→ Playground öffnen — Code eintippen, Vorschau live mitlaufen lassen, fertig. Beim ersten Öffnen liegt ein kleines Demo-Beispiel (eine Begrüßung mit zwei Buttons) in den Editoren, an dem du sofort herumschrauben kannst.

Tiefer geht es auf den Unterseiten: das Manual mit jeder Funktion und jeder Grenze, Beispiele für typische Durchläufe und gesammelte Tipps & Tricks.

Verwandte JPKCom-Tools

Der Playground ist der Spielplatz — diese Tools helfen davor und danach:

  • Compiler — SCSS zu CSS kompilieren sowie HTML, JS und CSS minifizieren oder beautifyen, wenn aus dem Schnipsel Produktionscode werden soll.
  • Beautify — JavaScript, CSS und HTML formatieren und entwirren, bevor du fremden Code im Playground untersuchst.
  • Source Viewer — Quellcode für über 100 Sprachen ansehen und hervorheben, wenn du Code nur lesen statt ausführen willst.