JPKCom DB

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.

Try front-end code right in the browser

The 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 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 — 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 with every feature and every limit, examples for typical runs, and a collection of tips & tricks.

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

  • Compiler — compile SCSS to CSS and minify or beautify HTML, JS, and CSS when a snippet turns into production code.
  • Beautify — format and de-obfuscate JavaScript, CSS, and HTML before you inspect someone else's code in the Playground.
  • Source Viewer — view and syntax-highlight source code for 100+ languages when you only want to read code, not run it.