JPKCom DB

Playground

What the Playground does and how its HTML, CSS/SCSS, and JS editors pair with a live preview — plus an optional in-browser PHP mode. 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. And if you like, you can even run PHP right in the browser — with no server at all.

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.

PHP right in the browser (optional)

A PHP switch in the toolbar turns the front-end sandbox into a full PHP editor: the HTML panel becomes HTML+PHP, and a click on Run PHP executes your code with a real PHP 8.4 — entirely in the browser, with no server. This is powered by php-wasm, a WebAssembly port of PHP (Apache-2.0). The HTML output it produces then lands in the same preview as usual; your CSS and JavaScript are wrapped around it just like in normal mode.

A few things differ in PHP mode: there's no live preview (you rebuild deliberately with Run PHP), the roughly 13 MB PHP engine is loaded once on first activation, and a PHP Log collects warnings, notices, and errors. The details are in the manual.

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.

The PHP mode works a little differently under the hood: PHP runs via WebAssembly on the main thread (not inside the sandboxed <iframe>), and only its finished HTML output then moves into the sandboxed preview. Your PHP code never leaves your machine any more than your front-end code does.

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.