# Playground

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

Source: https://www.jpkc.com/db/tools/playground/

## Front-End-Code direkt im Browser ausprobieren

Der [Playground](https://www.jpkc.com/tools/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](https://ace.c9.io/) 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](https://www.jpkc.com/tools/playground/)** — 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](https://www.jpkc.com/db/tools/playground/manual/)** mit jeder Funktion und jeder Grenze, **[Beispiele](https://www.jpkc.com/db/tools/playground/examples/)** für typische Durchläufe und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/playground/tips/)**.

## Verwandte JPKCom-Tools

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

- **[Compiler](https://www.jpkc.com/db/tools/compiler/)** — SCSS zu CSS kompilieren sowie HTML, JS und CSS minifizieren oder beautifyen, wenn aus dem Schnipsel Produktionscode werden soll.
- **[Beautify](https://www.jpkc.com/db/tools/beautify/)** — JavaScript, CSS und HTML formatieren und entwirren, bevor du fremden Code im Playground untersuchst.
- **[Source Viewer](https://www.jpkc.com/db/tools/source/)** — Quellcode für über 100 Sprachen ansehen und hervorheben, wenn du Code nur lesen statt ausführen willst.