# Playground

> What the Playground does and how its HTML, CSS/SCSS, and JS editors pair with a live preview — your starting point for the manual, examples, and tips.

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

## Try front-end code right in the browser

The [Playground](https://www.jpkc.com/tools/playground/) is an interactive HTML, CSS, and JavaScript editor with a live preview. You write code in three side-by-side editor panels — **HTML**, **CSS** (optionally **SCSS**), and **JavaScript** — and see the result instantly in a rendered preview next to them. No local setup, no build step, no account: open the page and start.

This solves an everyday problem: you want to try out a small component, a CSS effect, or a JS snippet quickly, without setting up a project, creating a file, and reloading the browser. That's exactly what the Playground is for — a sketchpad for front-end code that removes the friction between an idea and a finished snippet.

The tool is built for everyone who builds or learns in the browser: **developers** who want to verify an idea or isolate a bug; **learners** who want to try out HTML/CSS/JS step by step and see the result immediately; and anyone who wants to show someone a runnable mini example or hand it over as a file. Everything runs locally in your browser.

## What the Playground does — at a glance

The features group into four areas:

- **Three code editors** — one [ACE editor](https://ace.c9.io/) each for HTML, CSS/SCSS, and JavaScript, with syntax highlighting (the "Dracula" theme). Per panel you can change the font size and copy, download, or clear the content. The CSS editor has an **SCSS switch** that compiles its content to CSS client-side before the preview.
- **Live preview** — a rendered preview in a sandboxed `<iframe>`. In **Live** mode (the default) it updates automatically as you type; alternatively you rebuild it with the **Run** button or `Ctrl`/`Cmd`+`Enter`. You can zoom the preview, switch between **Rendered Preview** and **HTML Source**, and open it in a new tab.
- **Optional assets** — a dropdown lets you inject **Bootstrap CSS**, **Bootstrap JS**, **Bootstrap Icons**, **jQuery**, and a Bootstrap **dark mode** into the preview without wiring them up yourself.
- **Save, share, layout** — content is auto-saved in the browser (LocalStorage); up to eight named **snippets** can be stored and reloaded. Export the full state as a standalone HTML file (**Export HTML**) and read it back later with **Import HTML**. Plus: show and hide panels, drag the divider to grow the editors or the preview, and a fullscreen mode.

## Architecture: everything in the browser

The Playground is a **purely client-side** tool. Your code never leaves your machine: the preview is assembled from your three editors into a complete HTML document and loaded into a **`sandbox` `<iframe>`** that runs in the same browser. The SCSS compilation also happens locally (via a lazy-loaded JavaScript library), not on a server. Only the optional assets (Bootstrap, jQuery) come from the JPKCom server — and only when you switch them on.

The sandboxed `<iframe>` deliberately allows only what's needed (scripts, forms, dialogs, popups) but runs without access to the host page — so your code can't break out of the Playground. Details and limits are in the manual.

## Try it now

**[→ Open the Playground](https://www.jpkc.com/tools/playground/)** — type code, watch the preview update live, done. On first open, a small demo example (a greeting with two buttons) sits in the editors for you to tinker with right away.

There's more on the subpages: the **[manual](https://www.jpkc.com/db/en/tools/playground/manual/)** with every feature and every limit, **[examples](https://www.jpkc.com/db/en/tools/playground/examples/)** for typical runs, and a collection of **[tips & tricks](https://www.jpkc.com/db/en/tools/playground/tips/)**.

## Related JPKCom tools

The Playground is the sandbox — these tools help before and after:

- **[Compiler](https://www.jpkc.com/db/en/tools/compiler/)** — compile SCSS to CSS and minify or beautify HTML, JS, and CSS when a snippet turns into production code.
- **[Beautify](https://www.jpkc.com/db/en/tools/beautify/)** — format and de-obfuscate JavaScript, CSS, and HTML before you inspect someone else's code in the Playground.
- **[Source Viewer](https://www.jpkc.com/db/en/tools/source/)** — view and syntax-highlight source code for 100+ languages when you only want to read code, not run it.