Playground — Manual

Back to the overview: Playground · Open the tool: www.jpkc.com/tools/playground/

This manual documents the Playground in full: every editor, every toolbar button, the preview options, persistence, and the limits of the sandbox. The tool's interface is in English, so the button and label names are given here in their original English spelling — exactly what you'll see in the live interface.

Layout of the interface

From top to bottom, the interface has four parts:

Toolbar (pg-toolbar) — Run/Live, the PHP switch, Snippets, Export/Import, asset selection, panel toggles, and fullscreen.
Editor row — the three code panels HTML, CSS/SCSS, and JavaScript side by side.
Divider (pg-resizer) — a draggable bar you use to shift the height ratio between the editor row and the preview.
Preview (pg-preview) — the rendered result in the <iframe>, or the HTML source view.

The three editors

Each panel is a standalone ACE editor with syntax highlighting in the "Dracula" theme. Defaults: font size 13, tab width 2 (soft tabs), no line wrapping, no autocompletion. A change in any editor triggers two things: the auto-save (see below) and — when Live is active — a new preview.

HTML editor

The left panel (label HTML) holds your page's body content. What you write here lands in the <body> of the preview document — so you don't need a <!DOCTYPE>, <html>, or <head> scaffold; the Playground adds that itself. You can also drop in your own <script src="…"> or <link> tags from a CDN if you need a library that isn't in the asset dropdown.

CSS / SCSS editor

The middle panel (label CSS) holds your styles, which the Playground writes into a <style> block in the preview's <head>. Use the SCSS switch in the panel header to put the editor into SCSS mode — the label then changes to SCSS, and the content is compiled to CSS client-side before every preview.

The SCSS compiler (a sass.js library) is lazy-loaded on the first SCSS run; you'll briefly see "Loading SCSS compiler…". Compilation uses the expanded style. A syntax error in your SCSS does not break the preview: you get an error message with a line number, and the preview shows a CSS comment with the error text instead of the styles.

JavaScript editor

The right panel (label JavaScript) holds your script. The Playground places your JS at the end of the <body>, so the DOM is already fully parsed when it runs and you can do without DOMContentLoaded. Top-level function declarations land in the global scope — which is why inline handlers like onclick="myFunction()" from the HTML panel work too. Your script runs inside a try/catch block: a runtime error doesn't take the preview down but is logged to the browser console with the [Playground JS] prefix.

Per-panel actions

Each of the three panels has the same actions in its header:

Font size — minus/plus change the editor font size for that panel (range 10–26, default 13); the current value sits in between.
Copy — copies the panel's entire content to the clipboard.
Download — downloads the content as a file (playground.html, playground.css or playground.scss, playground.js). An empty panel reports "Editor is empty."
Clear (trash icon) — empties the panel.

Execution: Live mode and Run

Two controls on the left of the toolbar govern how the preview updates:

Run (green button, Ctrl/Cmd+Enter) — rebuilds the preview immediately, regardless of Live mode.
Live (checkbox, on by default) — when active, the preview rebuilds as you type, slightly delayed (debounced), so not every keystroke renders. Turn Live off and only the Run button updates.

After each run a brief "Updated" status with a timestamp appears in the preview header.

The preview

The preview renders a complete HTML document the Playground assembles from your three editors: your HTML into the <body>, your (compiled) CSS into a <style> block, your JS at the end of the <body>. Closing </style> and </script> literals in your code are escaped in the process so they don't prematurely close the surrounding blocks.

Rendered Preview and HTML Source

On the right of the preview header you switch between two views:

Rendered Preview (eye icon) — the rendered result in the <iframe>.
HTML Source (code icon) — the complete generated HTML source of the preview document as text. Handy for seeing exactly what the Playground hands to the browser — including the injected assets.

Zoom

Minus/plus in the preview header zoom the preview in fixed steps between 25% and 200% (25, 33, 50, 67, 75, 100, 125, 150, 200%). Zoom only scales the display; the preview document itself still renders at full resolution. Useful to see a whole page at a glance or to enlarge details.

Open in a new tab

The arrow-icon button (Open preview in new tab) opens the current preview document in its own browser tab — where it runs as a normal page, without the sandbox restrictions of the embedded <iframe>. If a popup blocker stops the tab, a note appears.

Optional assets

The Assets dropdown (layers icon) injects common front-end libraries into the preview without you linking them yourself. A counter badge on the button shows how many are active. Available:

Bootstrap CSS — the Bootstrap 5.3 stylesheet (in the <head>).
Bootstrap JS — the Bootstrap 5.3 JS bundle including Popper (for components such as modals, dropdowns, tooltips).
Bootstrap Icons — the Bootstrap Icons 1.11 icon set.
jQuery — jQuery 4.0 (in the <head>, so it's available to your JS).
Dark Mode — sets data-bs-theme="dark" on the preview's <html>. This option is only selectable when Bootstrap CSS is active; turn Bootstrap CSS off and Dark Mode is disabled automatically.

The CSS assets go in as <link> in the <head>, the JS assets as <script> also in the <head>, so they're available once the body is parsed. The asset selection is persisted and is part of snippets and exports.

Save and restore

Auto-save (LocalStorage)

The Playground continuously saves your state to your browser's LocalStorage — slightly delayed after you type. It saves the HTML, CSS, and JS, the CSS mode (CSS/SCSS), the asset selection, the panel visibility, the font sizes, and the zoom level. Come back later and your last state is there. On your very first visit (or after a reset), a small demo example sits in the editors.

Snippets (named slots)

Snippets (floppy-disk icon) opens a dialog where you store the current state under a name. You can save up to eight snippets, each with HTML, CSS, JS, CSS mode, asset selection, and a timestamp. An already-used name overwrites the existing entry. When the limit is reached, you have to delete one first. The list shows each snippet's name, date, and the character count per panel, plus Load and Del buttons. Snippets also live in LocalStorage.

Reset

The reset button (circular arrow, Reset to defaults) — after a confirmation — resets all editors, the CSS mode, the assets, the panel visibility, the font sizes, and the zoom to their factory defaults and loads the demo example. Saved snippets are kept — reset only clears the current working state.

Export and import

Export HTML

Export HTML downloads the complete current state as a standalone .html file (playground.html) — a full document with your HTML, the (compiled) CSS, your JS, and the active assets. The file also runs outside the Playground in any browser. It additionally contains invisible markers (@@playground-…@@ comments and the asset selection as JSON) by which the Playground later recognizes it.

Import HTML

Import HTML reads a previously exported Playground file back in: the Playground finds the markers, extracts HTML, CSS, and JS back into the respective editors, and restores the saved asset selection. A file without those markers is rejected — so only files exported from this Playground can be imported, not arbitrary HTML.

PHP mode (in-browser PHP)

The PHP switch on the left of the toolbar (next to Run/Live) turns the Playground into a full PHP editor. Switch it on and a real PHP 8.4 runs in the browser — via php-wasm, a WebAssembly port of PHP (Apache-2.0). There's no server; your code is sent nowhere.

What changes in PHP mode

Once the switch is on, the interface adapts:

The HTML panel is now labelled HTML+PHP and switches its syntax highlighting to PHP. Here you write mixed HTML+PHP code, exactly like in a .php file — literal text outside <?php … ?> is output, the PHP code in between is executed.
The Run button becomes Run PHP, and the Live checkbox disappears: in PHP mode there is no automatic preview as you type — you always rebuild deliberately with Run PHP (or Ctrl/Cmd+Enter).
A new PHP Log button appears (see below).

The CSS and JavaScript panels stay as they are: the Playground wraps your styles and scripts around the PHP output just like in normal mode. You don't have to write anything special in your PHP code for that.

How the PHP preview is built

When you click Run PHP, the Playground executes the HTML+PHP code and takes its output (the HTML that PHP produces). From that it assembles — as in normal mode — a complete preview document: your CSS into a <style> block, your JS at the end of the body, the active assets into the <head>. If your PHP already outputs a complete HTML document (<!doctype>/<html>), the Playground splices styles, scripts, and assets into the right places; otherwise it treats the output as a body fragment. The result lands in the same sandboxed preview as ever.

Run PHP instead of Live — and why

Unlike HTML/CSS/JS, PHP runs via WebAssembly on the browser's main thread, not in a background worker. That has a price: an actual PHP infinite loop (while (true)) would block the tab, because WebAssembly runs synchronously and can't be aborted from the outside. That's exactly why PHP mode replaces the live preview with the manual Run PHP button — you keep control over when code runs, and never accidentally start a running infinite loop just by typing.

PHP Log (error log)

To keep the preview free of error markup, PHP is configured so that errors are not written into the output but logged (display_errors=Off, log_errors=On, error_reporting=E_ALL). The PHP Log button shows the contents of that log in a dialog: all warnings, notices, fatals, and parse errors from the last run — plus your own error_log() calls, each with the correct line number. A red counter badge on the button shows how many lines the log holds. If the output stays empty, a brief note points you to the log.

Loading and unloading

The PHP engine is large (around 13 MB of WebAssembly) and is therefore loaded only when you activate PHP mode (or at the latest on the first Run PHP) — not when you open the page. The Playground remembers that PHP mode was on; after a reload it loads the engine automatically. Turn PHP off again and the Playground releases the engine.

Export, import, and snippets in PHP mode

The PHP state can be saved too, with a few specifics:

Export HTML in PHP mode writes the raw HTML+PHP source into the file (playground.php.html) and records that it's PHP. You can import this file again — but, unlike a normal export, it's not runnable as a finished page in the browser (it contains unexecuted PHP).
On import of such a file, the Playground recognizes the PHP marker and switches PHP mode back on automatically.
Snippets store the PHP mode along with the rest; load a PHP snippet and the mode is active again.
The download of the HTML+PHP panel saves as a .php file accordingly.

Requirements and limits

One-time download. On first activation around 13 MB is loaded — that needs an internet connection and a moment. After that the engine is in the browser cache.
No server environment. PHP itself runs, but without a web server, without a database, and without filesystem access to your machine. The mode is meant for trying out PHP logic, functions, and snippets — not as a replacement for a real PHP environment.
Infinite loops block the tab. See above — run suspect loops deliberately and under control with Run PHP.

Layout: panels, divider, fullscreen

Panels — the HTML, CSS, JS toggles (the Panels: group) hide or show individual editors. That lets you focus on CSS only, for example, and give the preview more room. With all three off, the editor row collapses entirely.
Divider — the bar between editors and preview can be dragged up or down with the mouse to change the height ratio.
Fullscreen — the fullscreen button (F11) maximizes the Playground; Esc or F11 again leaves the mode.

Keyboard shortcuts

Ctrl/Cmd + Enter — rebuild the preview (Run; in PHP mode Run PHP).
F11 — toggle fullscreen.
Esc — exit fullscreen.

Architecture, sandbox, and limits

The Playground is purely client-side. Your code is not sent to a server; the preview is assembled in the browser and loaded into a sandbox <iframe>. The sandbox specifically allows allow-scripts, allow-forms, allow-modals, and allow-popups — enough for your JS, forms, prompt/alert, and popups to work — but not access to the host page. So the preview code can't reach the Playground or your data there. The SCSS compilation also runs locally via the lazy-loaded sass.js library.

A few limits follow from this that are worth knowing:

External assets need the network. If you embed a CDN library in the HTML panel, the browser loads it at runtime — which only works online and is subject to the provider's CORS/loading rules.
Storage is browser- and device-bound. Auto-save and snippets live in LocalStorage. A different browser, a different device, private mode, or cleared browser data means your state isn't there — or is gone. For permanent keeping, use Export HTML.
Eight snippet slots. No more than eight named snippets; export anything beyond that as a file.
The "new tab" is not sandboxed. Code opened via Open preview in new tab runs as a normal page without the <iframe> restrictions — useful for full-fledged testing, but be correspondingly careful there with untrusted code.
Import only for Playground files. Only files produced by Export HTML (with markers) can be re-imported.
PHP runs outside the sandbox. In PHP mode, PHP is executed via WebAssembly on the main thread (not in the <iframe>); only its HTML output moves into the sandbox. A PHP infinite loop can therefore block the tab — more on that under PHP mode.

For the introduction and the audiences, see the overview page. Concrete runs are in the examples, strategy and pitfalls in the tips & tricks. You can try all of it directly in the tool.