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, 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.

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).
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.

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.